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
primefaces · Sep 15, 2021 · d9d871e · d9d871e
1 parent 357b261
commit d9d871e
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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>