From d9d871efb64d3e2b82f1666a222336973c937293 Mon Sep 17 00:00:00 2001
From: Mouad Taoussi <50294614+mouadTaoussi@users.noreply.github.com>
Date: Wed, 15 Sep 2021 07:33:20 +0100
Subject: [PATCH] Fixed #1362 - Added autoHighlight property to AutoComplete
 (#1429)

* Adding autoHighlight to first element in autocomplete

* Adding autoHighlight to first element in autocomplete

* Adding autoHighlight to first element in autocomplete

* Adding autoHighlight to first element in autocomplete

* Added autoHighlight to first element in autocomplete

* Added autoHighlight to first element in autocomplete: set default to false
---
 src/components/autocomplete/AutoComplete.d.ts |  1 +
 src/components/autocomplete/AutoComplete.vue  | 17 +++++++++++++++--
 src/views/autocomplete/AutoCompleteDoc.vue    |  6 ++++++
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/components/autocomplete/AutoComplete.d.ts b/src/components/autocomplete/AutoComplete.d.ts
index 558c40c7d9..ade331931f 100755
--- a/src/components/autocomplete/AutoComplete.d.ts
+++ b/src/components/autocomplete/AutoComplete.d.ts
@@ -10,6 +10,7 @@ interface AutoCompleteProps {
     scrollHeight?: string;
     dropdown?: boolean;
     dropdownMode?: string;
+    autoHighlight?: boolean;
     multiple?: boolean;
     minLength?: number;
     delay?: number;
diff --git a/src/components/autocomplete/AutoComplete.vue b/src/components/autocomplete/AutoComplete.vue
index eeb8b528a3..71b44c8441 100755
--- a/src/components/autocomplete/AutoComplete.vue
+++ b/src/components/autocomplete/AutoComplete.vue
@@ -86,6 +86,10 @@ export default {
             type: String,
             default: 'blank'
         },
+        autoHighlight: {
+            type: Boolean,
+            default: false
+        },
         multiple: {
             type: Boolean,
             default: false
@@ -321,6 +325,10 @@ export default {
         },
         showOverlay() {
             this.overlayVisible = true;
+            
+            setTimeout(()=>{
+                this.autoHighlightFirstItem()
+            },200)
         },
         hideOverlay() {
             this.overlayVisible = false;
@@ -345,7 +353,6 @@ export default {
                 query: query
             });
         },
-
         onInputClicked(event) {
             if(this.completeOnFocus) {
                 this.search(event, '', 'click');
@@ -384,10 +391,16 @@ export default {
         onBlur() {
             this.focused = false;
         },
+        autoHighlightFirstItem() {
+            if (this.autoHighlight && this.suggestions && this.suggestions.length) {
+                const itemToHighlight = this.overlay.firstElementChild.firstElementChild
+                DomHandler.addClass(itemToHighlight, 'p-highlight')
+            }
+        },
         onKeyDown(event) {
             if (this.overlayVisible) {
                 let highlightItem = DomHandler.findSingle(this.overlay, 'li.p-highlight');
-
+                
                 switch(event.which) {
                     //down
                     case 40:
diff --git a/src/views/autocomplete/AutoCompleteDoc.vue b/src/views/autocomplete/AutoCompleteDoc.vue
index 96b0fba95e..1dc9f0ebb8 100755
--- a/src/views/autocomplete/AutoCompleteDoc.vue
+++ b/src/views/autocomplete/AutoCompleteDoc.vue
@@ -187,6 +187,12 @@ export default {
                         <td>blank</td>
                         <td>Specifies the behavior dropdown button. Default "blank" mode sends an empty string and "current" mode sends the input value.</td>
                     </tr>
+                    <tr>
+                        <td>autoHighlight</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Highlights automatically the first item of the dropdown to be selected.</td>
+                    </tr>
                     <tr>
                         <td>multiple</td>
                         <td>boolean</td>