From 61208c4d46e6e9feacbd0b7a0913c955db845c38 Mon Sep 17 00:00:00 2001 From: Mert Sincan Date: Fri, 18 Oct 2024 16:16:30 +0100 Subject: [PATCH] Add form support to `AutoComplete` --- .../src/autocomplete/AutoComplete.vue | 65 ++++++++++--------- .../src/autocomplete/BaseAutoComplete.vue | 21 +----- .../autocomplete/style/AutoCompleteStyle.js | 8 +-- 3 files changed, 39 insertions(+), 55 deletions(-) diff --git a/packages/primevue/src/autocomplete/AutoComplete.vue b/packages/primevue/src/autocomplete/AutoComplete.vue index 11ca32c77..4f5eccf76 100755 --- a/packages/primevue/src/autocomplete/AutoComplete.vue +++ b/packages/primevue/src/autocomplete/AutoComplete.vue @@ -5,12 +5,13 @@ ref="focusInput" :id="inputId" type="text" + :name="$formName" :class="[cx('pcInputText'), inputClass]" :style="inputStyle" :value="inputValue" :placeholder="placeholder" :tabindex="!disabled ? tabindex : -1" - :fluid="hasFluid" + :fluid="$fluid" :disabled="disabled" :invalid="invalid" :variant="variant" @@ -45,14 +46,14 @@ v-bind="ptm('inputMultiple')" >
  • @@ -122,7 +123,7 @@
    - +
    - + {{ selectedMessageText }} @@ -199,7 +200,7 @@ export default { name: 'AutoComplete', extends: BaseAutoComplete, inheritAttrs: false, - emits: ['update:modelValue', 'change', 'focus', 'blur', 'item-select', 'item-unselect', 'option-select', 'option-unselect', 'dropdown-click', 'clear', 'complete', 'before-show', 'before-hide', 'show', 'hide'], + emits: ['change', 'focus', 'blur', 'item-select', 'item-unselect', 'option-select', 'option-unselect', 'dropdown-click', 'clear', 'complete', 'before-show', 'before-hide', 'show', 'hide'], inject: { $pcFluid: { default: null } }, @@ -342,6 +343,7 @@ export default { this.focused = false; this.focusedOptionIndex = -1; this.$emit('blur', event); + this.formField.onBlur?.(); }, onKeyDown(event) { if (this.disabled) { @@ -533,7 +535,7 @@ export default { this.$refs.focusInput.value = ''; if (!this.isSelected(option)) { - this.updateModel(event, [...(this.modelValue || []), value]); + this.updateModel(event, [...(this.d_value || []), value]); } } else { this.updateModel(event, value); @@ -602,9 +604,9 @@ export default { this.focusedOptionIndex = -1; if (this.multiple) { - if (isEmpty(target.value) && this.hasSelectedOption) { + if (isEmpty(target.value) && this.$filled) { focus(this.$refs.multiContainer); - this.focusedMultipleOptionIndex = this.modelValue.length; + this.focusedMultipleOptionIndex = this.d_value.length; } else { event.stopPropagation(); // To prevent onArrowLeftKeyOnMultiple method } @@ -644,7 +646,7 @@ export default { onEnterKey(event) { if (!this.typeahead) { if (this.multiple) { - this.updateModel(event, [...(this.modelValue || []), event.target.value]); + this.updateModel(event, [...(this.d_value || []), event.target.value]); this.$refs.focusInput.value = ''; } } else { @@ -673,11 +675,11 @@ export default { }, onBackspaceKey(event) { if (this.multiple) { - if (isNotEmpty(this.modelValue) && !this.$refs.focusInput.value) { - const removedValue = this.modelValue[this.modelValue.length - 1]; - const newValue = this.modelValue.slice(0, -1); + if (isNotEmpty(this.d_value) && !this.$refs.focusInput.value) { + const removedValue = this.d_value[this.d_value.length - 1]; + const newValue = this.d_value.slice(0, -1); - this.$emit('update:modelValue', newValue); + this.updateValue(newValue, event); this.$emit('item-unselect', { originalEvent: event, value: removedValue }); this.$emit('option-unselect', { originalEvent: event, value: removedValue }); } @@ -691,7 +693,7 @@ export default { onArrowRightKeyOnMultiple() { this.focusedMultipleOptionIndex++; - if (this.focusedMultipleOptionIndex > this.modelValue.length - 1) { + if (this.focusedMultipleOptionIndex > this.d_value.length - 1) { this.focusedMultipleOptionIndex = -1; focus(this.$refs.focusInput); } @@ -810,7 +812,7 @@ export default { isSelected(option) { const optionValue = this.getOptionValue(option); - return this.multiple ? (this.modelValue || []).some((value) => this.isEquals(value, optionValue)) : this.isEquals(this.modelValue, this.getOptionValue(option)); + return this.multiple ? (this.d_value || []).some((value) => this.isEquals(value, optionValue)) : this.isEquals(this.d_value, this.getOptionValue(option)); }, findFirstOptionIndex() { return this.visibleOptions.findIndex((option) => this.isValidOption(option)); @@ -829,7 +831,7 @@ export default { return matchedOptionIndex > -1 ? matchedOptionIndex : index; }, findSelectedOptionIndex() { - return this.hasSelectedOption ? this.visibleOptions.findIndex((option) => this.isValidSelectedOption(option)) : -1; + return this.$filled ? this.visibleOptions.findIndex((option) => this.isValidSelectedOption(option)) : -1; }, findFirstFocusedOptionIndex() { const selectedIndex = this.findSelectedOptionIndex(); @@ -856,8 +858,8 @@ export default { this.$emit('complete', { originalEvent: event, query }); }, removeOption(event, index) { - const removedOption = this.modelValue[index]; - const value = this.modelValue.filter((_, i) => i !== index).map((option) => this.getOptionValue(option)); + const removedOption = this.d_value[index]; + const value = this.d_value.filter((_, i) => i !== index).map((option) => this.getOptionValue(option)); this.updateModel(event, value); this.$emit('item-unselect', { originalEvent: event, value: removedOption }); @@ -888,13 +890,13 @@ export default { }); }, autoUpdateModel() { - if (this.selectOnFocus && this.autoOptionFocus && !this.hasSelectedOption) { + if (this.selectOnFocus && this.autoOptionFocus && !this.$filled) { this.focusedOptionIndex = this.findFirstFocusedOptionIndex(); this.onOptionSelect(null, this.visibleOptions[this.focusedOptionIndex], false); } }, updateModel(event, value) { - this.$emit('update:modelValue', value); + this.updateValue(value, event); this.$emit('change', { originalEvent: event, value }); }, flatOptions(options) { @@ -924,23 +926,25 @@ export default { return this.optionGroupLabel ? this.flatOptions(this.suggestions) : this.suggestions || []; }, inputValue() { - if (isNotEmpty(this.modelValue)) { - if (typeof this.modelValue === 'object') { - const label = this.getOptionLabel(this.modelValue); + if (this.$filled) { + if (typeof this.d_value === 'object') { + const label = this.getOptionLabel(this.d_value); - return label != null ? label : this.modelValue; + return label != null ? label : this.d_value; } else { - return this.modelValue; + return this.d_value; } } else { return ''; } }, + // @deprecated use $filled instead. hasSelectedOption() { - return isNotEmpty(this.modelValue); + return this.$filled; }, equalityKey() { - return this.dataKey; // TODO: The 'optionValue' properties can be added. + // @todo: The 'optionValue' properties can be added. + return this.dataKey; }, searchResultMessageText() { return isNotEmpty(this.visibleOptions) && this.overlayVisible ? this.searchMessageText.replaceAll('{0}', this.visibleOptions.length) : this.emptySearchMessageText; @@ -958,7 +962,7 @@ export default { return this.emptySelectionMessage || this.$primevue.config.locale.emptySelectionMessage || ''; }, selectedMessageText() { - return this.hasSelectedOption ? this.selectionMessageText.replaceAll('{0}', this.multiple ? this.modelValue.length : '1') : this.emptySelectionMessageText; + return this.$filled ? this.selectionMessageText.replaceAll('{0}', this.multiple ? this.d_value.length : '1') : this.emptySelectionMessageText; }, listAriaLabel() { return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.listLabel : undefined; @@ -977,9 +981,6 @@ export default { }, panelId() { return this.id + '_panel'; - }, - hasFluid() { - return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid; } }, components: { diff --git a/packages/primevue/src/autocomplete/BaseAutoComplete.vue b/packages/primevue/src/autocomplete/BaseAutoComplete.vue index 66df8f7e4..eb17c46f7 100644 --- a/packages/primevue/src/autocomplete/BaseAutoComplete.vue +++ b/packages/primevue/src/autocomplete/BaseAutoComplete.vue @@ -1,12 +1,11 @@