Fixed #354 - AutoComplete completeOnFocus like PrimeNG

src/components/autocomplete/AutoComplete.d.ts

@@ -13,6 +13,7 @@ interface AutoCompleteProps {
     minLength?: number;
     delay?: number;
     appendTo?: string;
+    completeOnFocus?: boolean;
     inputStyle?: any;
     inputClass?: string;
     forceSelection?: boolean;

src/components/autocomplete/AutoComplete.vue

@@ -1,6 +1,6 @@
 <template>
     <span ref="container" :class="containerClass" aria-haspopup="listbox" :aria-owns="listId" :aria-expanded="overlayVisible" :style="style">
-        <input ref="input" :class="inputFieldClass" :style="inputStyle" v-bind="$attrs" :value="inputValue" @input="onInput" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" @change="onChange"
+        <input ref="input" :class="inputFieldClass" :style="inputStyle" v-bind="$attrs" :value="inputValue" @click="onInputClicked" @input="onInput" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" @change="onChange"
             type="text" autoComplete="off" v-if="!multiple" role="searchbox" aria-autocomplete="list" :aria-controls="listId">
         <ul ref="multiContainer" :class="multiContainerClass" v-if="multiple" @click="onMultiContainerClick">
             <li v-for="(item, i) of modelValue" :key="i" class="p-autocomplete-token">
@@ -96,6 +96,10 @@ export default {
             type: Boolean,
             default: false
         },
+        completeOnFocus: {
+            type: Boolean,
+            default: false
+        },
         inputClass: null,
         inputStyle: null,
         class: null,
@@ -265,8 +269,11 @@ export default {
             this.focus();
             this.hideOverlay();
         },
-        onMultiContainerClick() {
+        onMultiContainerClick(event) {
             this.focus();
+            if(this.completeOnFocus) {
+                this.search(event, '', 'click');
+            }
         },
         removeItem(event, index) {
             let removedValue = this.modelValue[index];
@@ -320,6 +327,12 @@ export default {
                 query: query
             });
         },
+
+        onInputClicked(event) {
+            if(this.completeOnFocus) {
+                this.search(event, '', 'click');
+            }
+        },
         onInput(event) {
             this.inputTextValue = event.target.value;
 

src/views/autocomplete/AutoCompleteDoc.vue

@@ -199,6 +199,12 @@ export default {
                         <td>1</td>
                         <td>Minimum number of characters to initiate a search.</td>
                     </tr>
+                    <tr>
+                        <td>completeOnFocus</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether to run a query when input receives focus.</td>
+                    </tr>
                     <tr>
                         <td>delay</td>
                         <td>number</td>