Fixed #1120 - forceSelection for AutoComplete

primefaces · Mar 25, 2021 · 7ff1b32 · 7ff1b32
1 parent 342f251
commit 7ff1b32
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 5 deletions.
diff --git a/src/components/autocomplete/AutoComplete.d.ts b/src/components/autocomplete/AutoComplete.d.ts
@@ -12,6 +12,7 @@ declare class AutoComplete extends Vue {
     delay?: number;
     ariaLabelledBy?: string;
     appendTo?: string;
+    forceSelection?: boolean;
     $emit(eventName: 'input', value: any): this;
     $emit(eventName: 'item-select', e: {originalEvent: Event, value: any}): this;
     $emit(eventName: 'item-unselect', e: {originalEvent: Event, value: any}): this;

diff --git a/src/components/autocomplete/AutoComplete.vue b/src/components/autocomplete/AutoComplete.vue
@@ -79,6 +79,10 @@ export default {
         appendTo: {
             type: String,
             default: null
+        },
+        forceSelection: {
+            type: Boolean,
+            default: false
         }
     },
     timeout: null,
@@ -401,6 +405,30 @@ export default {
                 }
             }
         },
+        onChange(event) {
+            if (this.forceSelection) {
+                let valid = false;
+                let inputValue = event.target.value.trim();
+
+                if (this.suggestions)  {
+                    for (let item of this.suggestions) {
+                        let itemValue = this.field ? ObjectUtils.resolveFieldData(item, this.field) : item;
+                        if (itemValue && inputValue === itemValue.trim()) {
+                            valid = true;
+                            this.selectItem(event, item);
+                            break;
+                        }
+                    }
+                }
+
+                if (!valid) {
+                    this.$refs.input.value = '';
+                    this.inputTextValue = '';
+                    this.$emit('clear');
+                    this.$emit('input', null);
+                }
+            }
+        },
         isSelected(val) {
             let selected = false;
             if (this.value && this.value.length) {
@@ -438,7 +466,8 @@ export default {
                 input: this.onInput,
                 focus: this.onFocus,
                 blur: this.onBlur,
-                keydown: this.onKeyDown
+                keydown: this.onKeyDown,
+                change: this.onChange
             };
         },
         containerClass() {

diff --git a/src/views/autocomplete/AutoCompleteDemo.vue b/src/views/autocomplete/AutoCompleteDemo.vue
@@ -13,8 +13,8 @@
                 <h5>Basic</h5>
                 <AutoComplete v-model="selectedCountry1" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" />
 
-                <h5>Dropdown and Templating</h5>
-                <AutoComplete v-model="selectedCountry2" :suggestions="filteredCountries" @complete="searchCountry($event)" :dropdown="true" field="name">
+                <h5>Dropdown, Templating and Force Selection</h5>
+                <AutoComplete v-model="selectedCountry2" :suggestions="filteredCountries" @complete="searchCountry($event)" :dropdown="true" field="name" forceSelection>
                     <template #item="slotProps">
                         <div class="country-item">
                             <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.item.code.toLowerCase()" />

diff --git a/src/views/autocomplete/AutoCompleteDoc.vue b/src/views/autocomplete/AutoCompleteDoc.vue
@@ -54,6 +54,13 @@ export default {
 					Here is an example with a Country object that has name and code fields such as &#123;name:"United States",code:"USA"&#125;.</p>
 <CodeHighlight>
 &lt;AutoComplete field="label" v-model="selectedCountry" :suggestions="filteredCountriesBasic" @complete="searchCountryBasic($event)" /&gt;
+</CodeHighlight>
+
+                <h5>Force Selection</h5>
+        <p>ForceSelection mode validates the manual input to check whether it also exists in the suggestions list, if not the input value is cleared
+        to make sure the value passed to the model is always one of the suggestions. Simply enable <i>forceSelection</i> to enforce that input is always from the suggestion list.</p>
+<CodeHighlight>
+&lt;AutoComplete forceSelection v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" /&gt;
 </CodeHighlight>
 
 				<h5>Templating</h5>
@@ -147,6 +154,13 @@ export default {
                                 <td>string</td>
                                 <td>null</td>
                                 <td>Id of the element or "body" for document where the overlay should be appended to.</td>
+                            </tr>
+                            <tr>
+                                <td>forceSelection</td>
+                                <td>boolean</td>
+                                <td>false</td>
+                                <td>When present, autocomplete clears the manual input if it does not match of the suggestions to force only
+                                accepting values from the suggestions.</td>
                             </tr>
 						</tbody>
 					</table>
@@ -257,8 +271,8 @@ export default {
 &lt;h5&gt;Basic&lt;/h5&gt;
 &lt;AutoComplete v-model="selectedCountry1" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" /&gt;
 
-&lt;h5&gt;Dropdown and Templating&lt;/h5&gt;
-&lt;AutoComplete v-model="selectedCountry2" :suggestions="filteredCountries" @complete="searchCountry($event)" :dropdown="true" field="name"&gt;
+&lt;h5&gt;Dropdown, Templating and Force Selection&lt;/h5&gt;
+&lt;AutoComplete v-model="selectedCountry2" :suggestions="filteredCountries" @complete="searchCountry($event)" :dropdown="true" field="name" forceSelection&gt;
     &lt;template #item="slotProps"&gt;
         &lt;div class="country-item"&gt;
             &lt;img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.item.code.toLowerCase()" /&gt;