Refactor #500 - For AutoComplete
parent
3ad88388c0
commit
87f22a4aa8
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<span :class="containerClass" aria-haspopup="listbox" :aria-owns="listId" :aria-expanded="overlayVisible" :style="style">
|
<span ref="container" :id="containerId" :class="containerClass" aria-haspopup="listbox" :aria-owns="listId" :aria-expanded="overlayVisible" :style="style">
|
||||||
<input ref="input" :class="inputClass" v-bind="$attrs" :value="inputValue" @input="onInput" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" type="text" autoComplete="off" v-if="!multiple"
|
<input ref="input" :class="inputClass" v-bind="$attrs" :value="inputValue" @input="onInput" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" type="text" autoComplete="off" v-if="!multiple"
|
||||||
role="searchbox" aria-autocomplete="list" :aria-controls="listId">
|
role="searchbox" aria-autocomplete="list" :aria-controls="listId">
|
||||||
<ul ref="multiContainer" :class="multiContainerClass" v-if="multiple" @click="onMultiContainerClick">
|
<ul ref="multiContainer" :class="multiContainerClass" v-if="multiple" @click="onMultiContainerClick">
|
||||||
|
@ -29,15 +29,17 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler';
|
||||||
|
import UniqueComponentId from '../utils/UniqueComponentId';
|
||||||
import ObjectUtils from '../utils/ObjectUtils';
|
import ObjectUtils from '../utils/ObjectUtils';
|
||||||
import DomHandler from '../utils/DomHandler';
|
import DomHandler from '../utils/DomHandler';
|
||||||
import Button from '../button/Button';
|
import Button from '../button/Button';
|
||||||
import UniqueComponentId from '../utils/UniqueComponentId';
|
|
||||||
import Ripple from '../ripple/Ripple';
|
import Ripple from '../ripple/Ripple';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
inheritAttrs: false,
|
inheritAttrs: false,
|
||||||
props: {
|
props: {
|
||||||
|
id: null,
|
||||||
modelValue: null,
|
modelValue: null,
|
||||||
suggestions: {
|
suggestions: {
|
||||||
type: Array,
|
type: Array,
|
||||||
|
@ -80,6 +82,7 @@ export default {
|
||||||
},
|
},
|
||||||
timeout: null,
|
timeout: null,
|
||||||
outsideClickListener: null,
|
outsideClickListener: null,
|
||||||
|
scrollHandler: null,
|
||||||
overlay: null,
|
overlay: null,
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
@ -105,6 +108,8 @@ export default {
|
||||||
beforeUnmount() {
|
beforeUnmount() {
|
||||||
this.restoreAppend();
|
this.restoreAppend();
|
||||||
this.unbindOutsideClickListener();
|
this.unbindOutsideClickListener();
|
||||||
|
this.unbindScrollListener();
|
||||||
|
this.scrollHandler = null;
|
||||||
this.overlay = null;
|
this.overlay = null;
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
@ -113,9 +118,11 @@ export default {
|
||||||
this.appendContainer();
|
this.appendContainer();
|
||||||
this.alignOverlay();
|
this.alignOverlay();
|
||||||
this.bindOutsideClickListener();
|
this.bindOutsideClickListener();
|
||||||
|
this.bindScrollListener();
|
||||||
},
|
},
|
||||||
onOverlayLeave() {
|
onOverlayLeave() {
|
||||||
this.unbindOutsideClickListener();
|
this.unbindOutsideClickListener();
|
||||||
|
this.unbindScrollListener();
|
||||||
this.overlay = null;
|
this.overlay = null;
|
||||||
},
|
},
|
||||||
alignOverlay() {
|
alignOverlay() {
|
||||||
|
@ -135,6 +142,22 @@ export default {
|
||||||
document.addEventListener('click', this.outsideClickListener);
|
document.addEventListener('click', this.outsideClickListener);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
bindScrollListener() {
|
||||||
|
if (!this.scrollHandler) {
|
||||||
|
this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.container, this.containerId, () => {
|
||||||
|
if (this.overlayVisible) {
|
||||||
|
this.hideOverlay();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
this.scrollHandler.bindScrollListener();
|
||||||
|
},
|
||||||
|
unbindScrollListener() {
|
||||||
|
if (this.scrollHandler) {
|
||||||
|
this.scrollHandler.unbindScrollListener();
|
||||||
|
}
|
||||||
|
},
|
||||||
isOutsideClicked(event) {
|
isOutsideClicked(event) {
|
||||||
return !this.overlay.contains(event.target) && !this.isInputClicked(event) && !this.isDropdownClicked(event);
|
return !this.overlay.contains(event.target) && !this.isInputClicked(event) && !this.isDropdownClicked(event);
|
||||||
},
|
},
|
||||||
|
@ -384,6 +407,12 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
containerId() {
|
||||||
|
return this.id || UniqueComponentId();
|
||||||
|
},
|
||||||
|
listId() {
|
||||||
|
return this.containerId + '_list';
|
||||||
|
},
|
||||||
containerClass() {
|
containerClass() {
|
||||||
return ['p-autocomplete p-component p-inputwrapper', this.class, {
|
return ['p-autocomplete p-component p-inputwrapper', this.class, {
|
||||||
'p-autocomplete-dd': this.dropdown,
|
'p-autocomplete-dd': this.dropdown,
|
||||||
|
@ -416,9 +445,6 @@ export default {
|
||||||
else {
|
else {
|
||||||
return '';
|
return '';
|
||||||
}
|
}
|
||||||
},
|
|
||||||
listId() {
|
|
||||||
return UniqueComponentId() + '_list';
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
|
|
Loading…
Reference in New Issue