vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactor #5548 - For AutoComplete

pull/5677/head
tugcekucukoglu 2024-04-08 15:58:38 +03:00
parent 1c49889005
commit 285790f12c
2 changed files with 18 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/lib/autocomplete/AutoComplete.d.ts vendored
View File

@ -147,7 +147,7 @@ export interface AutoCompletePassThroughOptions {
* Used to pass attributes to the InputText component. * Used to pass attributes to the InputText component.
* @see {@link InputTextPassThroughOptions} * @see {@link InputTextPassThroughOptions}
*/ */
input?: InputTextPassThroughOptions<AutoCompleteSharedPassThroughMethodOptions>; input?: InputTextPassThroughOptions<AutoCompleteSharedPassThroughMethodOptions> | AutoCompletePassThroughOptionType;
/** /**
* Used to pass attributes to the container's DOM element. * Used to pass attributes to the container's DOM element.
*/ */

37
components/lib/autocomplete/AutoComplete.vue
View File

@ -64,18 +64,15 @@
</slot> </slot>
</li> </li>
<li :class="cx('inputToken')" role="option" v-bind="ptm('inputToken')"> <li :class="cx('inputToken')" role="option" v-bind="ptm('inputToken')">
<InputText <input
ref="focusInput" ref="focusInput"
:id="inputId" :id="inputId"
type="text"
:style="inputStyle" :style="inputStyle"
:class="inputClass" :class="inputClass"
:value="multipleInputValue"
:placeholder="placeholder" :placeholder="placeholder"
:tabindex="!disabled ? tabindex : -1" :tabindex="!disabled ? tabindex : -1"
:disabled="disabled" :disabled="disabled"
:invalid="invalid"
:variant="variant"
:unstyled="unstyled"
autocomplete="off" autocomplete="off"
role="combobox" role="combobox"
:aria-label="ariaLabel" :aria-label="ariaLabel"
@ -85,12 +82,13 @@
:aria-expanded="overlayVisible" :aria-expanded="overlayVisible"
:aria-controls="id + '_list'" :aria-controls="id + '_list'"
:aria-activedescendant="focused ? focusedOptionId : undefined" :aria-activedescendant="focused ? focusedOptionId : undefined"
:aria-invalid="invalid || undefined"
@focus="onFocus" @focus="onFocus"
@blur="onBlur" @blur="onBlur"
@keydown="onKeyDown" @keydown="onKeyDown"
@input="onInput" @input="onInput"
@change="onChange" @change="onChange"
:pt="ptm('input')" v-bind="ptm('input')"
/> />
</li> </li>
</ul> </ul>
@ -214,8 +212,7 @@ export default {
focusedOptionIndex: -1, focusedOptionIndex: -1,
focusedMultipleOptionIndex: -1, focusedMultipleOptionIndex: -1,
overlayVisible: false, overlayVisible: false,
searching: false, searching: false
multipleInputValue: null
}; };
}, },
watch: { watch: {
@ -299,7 +296,7 @@ export default {
this.dirty = true; this.dirty = true;
this.overlayVisible = true; this.overlayVisible = true;
this.focusedOptionIndex = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1; this.focusedOptionIndex = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;
isFocus && DomHandler.focus(this.$refs.focusInput.$el); isFocus && DomHandler.focus(this.multiple ? this.$refs.focusInput : this.$refs.focusInput.$el);
}, },
hide(isFocus) { hide(isFocus) {
const _hide = () => { const _hide = () => {
@ -309,7 +306,7 @@ export default {
this.clicked = false; this.clicked = false;
this.focusedOptionIndex = -1; this.focusedOptionIndex = -1;
isFocus && DomHandler.focus(this.$refs.focusInput.$el); isFocus && DomHandler.focus(this.multiple ? this.$refs.focusInput : this.$refs.focusInput.$el);
}; };
setTimeout(() => { setTimeout(() => {
@ -419,8 +416,6 @@ export default {
if (!this.multiple) { if (!this.multiple) {
this.updateModel(event, query); this.updateModel(event, query);
} else {
this.multipleInputValue = query;
} }
if (query.length === 0) { if (query.length === 0) {
@ -444,7 +439,8 @@ export default {
// when forceSelection is on, prevent called twice onOptionSelect() // when forceSelection is on, prevent called twice onOptionSelect()
if (this.visibleOptions && !this.multiple) { if (this.visibleOptions && !this.multiple) {
const matchedValue = this.visibleOptions.find((option) => this.isOptionMatched(option, this.$refs.focusInput.$el.value || '')); let value = this.multiple ? this.$refs.focusInput.value : this.$refs.focusInput.$el.value;
const matchedValue = this.visibleOptions.find((option) => this.isOptionMatched(option, value || ''));
if (matchedValue !== undefined) { if (matchedValue !== undefined) {
valid = true; valid = true;
@ -453,7 +449,8 @@ export default {
} }
if (!valid) { if (!valid) {
this.$refs.focusInput.$el.value = ''; if (this.multiple) this.$refs.focusInput.value = '';
else this.$refs.focusInput.$el.value = '';
this.$emit('clear'); this.$emit('clear');
!this.multiple && this.updateModel(event, null); !this.multiple && this.updateModel(event, null);
} }
@ -503,7 +500,7 @@ export default {
} }
if (!this.overlay || !this.overlay.contains(event.target)) { if (!this.overlay || !this.overlay.contains(event.target)) {
DomHandler.focus(this.$refs.focusInput.$el); DomHandler.focus(this.multiple ? this.$refs.focusInput : this.$refs.focusInput.$el);
} }
}, },
onDropdownClick(event) { onDropdownClick(event) {
@ -512,7 +509,7 @@ export default {
if (this.overlayVisible) { if (this.overlayVisible) {
this.hide(true); this.hide(true);
} else { } else {
DomHandler.focus(this.$refs.focusInput.$el); DomHandler.focus(this.multiple ? this.$refs.focusInput : this.$refs.focusInput.$el);
query = this.$refs.focusInput.$el.value; query = this.$refs.focusInput.$el.value;
if (this.dropdownMode === 'blank') this.search(event, '', 'dropdown'); if (this.dropdownMode === 'blank') this.search(event, '', 'dropdown');
@ -525,7 +522,7 @@ export default {
const value = this.getOptionValue(option); const value = this.getOptionValue(option);
if (this.multiple) { if (this.multiple) {
this.multipleInputValue = null; this.$refs.focusInput.value = '';
if (!this.isSelected(option)) { if (!this.isSelected(option)) {
this.updateModel(event, [...(this.modelValue || []), value]); this.updateModel(event, [...(this.modelValue || []), value]);
@ -662,7 +659,7 @@ export default {
}, },
onBackspaceKey(event) { onBackspaceKey(event) {
if (this.multiple) { if (this.multiple) {
if (ObjectUtils.isNotEmpty(this.modelValue) && !this.$refs.focusInput.$el.value) { if (ObjectUtils.isNotEmpty(this.modelValue) && !this.$refs.focusInput.value) {
const removedValue = this.modelValue[this.modelValue.length - 1]; const removedValue = this.modelValue[this.modelValue.length - 1];
const newValue = this.modelValue.slice(0, -1); const newValue = this.modelValue.slice(0, -1);
@ -681,7 +678,7 @@ export default {
if (this.focusedMultipleOptionIndex > this.modelValue.length - 1) { if (this.focusedMultipleOptionIndex > this.modelValue.length - 1) {
this.focusedMultipleOptionIndex = -1; this.focusedMultipleOptionIndex = -1;
DomHandler.focus(this.$refs.focusInput.$el); DomHandler.focus(this.$refs.focusInput);
} }
}, },
onBackspaceKeyOnMultiple(event) { onBackspaceKeyOnMultiple(event) {
@ -850,7 +847,7 @@ export default {
this.updateModel(event, value); this.updateModel(event, value);
this.$emit('item-unselect', { originalEvent: event, value: removedOption }); this.$emit('item-unselect', { originalEvent: event, value: removedOption });
this.dirty = true; this.dirty = true;
DomHandler.focus(this.$refs.focusInput.$el); DomHandler.focus(this.multiple ? this.$refs.focusInput : this.$refs.focusInput.$el);
}, },
changeFocusedOptionIndex(event, index) { changeFocusedOptionIndex(event, index) {
if (this.focusedOptionIndex !== index) { if (this.focusedOptionIndex !== index) {