From 5136a928b981d4baeeb08fbaa732fe8ee32f7328 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Sun, 16 May 2021 17:47:52 +0300
Subject: [PATCH] Fixed #354 - AutoComplete completeOnFocus like PrimeNG

---
 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 0c6c35eef..ab55c1058 100755
--- a/src/components/autocomplete/AutoComplete.d.ts
+++ b/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;
diff --git a/src/components/autocomplete/AutoComplete.vue b/src/components/autocomplete/AutoComplete.vue
index 39f7ce5fe..b0ef6aa91 100755
--- a/src/components/autocomplete/AutoComplete.vue
+++ b/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;
 
diff --git a/src/views/autocomplete/AutoCompleteDoc.vue b/src/views/autocomplete/AutoCompleteDoc.vue
index 9a737784b..ace3f3f42 100755
--- a/src/views/autocomplete/AutoCompleteDoc.vue
+++ b/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>