Refactor #500 - For Dropdown
parent
d386eff647
commit
792ca3372f
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div :class="containerClass" @click="onClick($event)">
|
<div ref="container" :class="containerClass" @click="onClick($event)">
|
||||||
<div class="p-hidden-accessible">
|
<div class="p-hidden-accessible">
|
||||||
<input ref="focusInput" type="text" :id="inputId" readonly :disabled="disabled" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :tabindex="tabindex"
|
<input ref="focusInput" type="text" :id="inputId" readonly :disabled="disabled" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :tabindex="tabindex"
|
||||||
aria-haspopup="listbox" :aria-expanded="overlayVisible" :aria-labelledby="ariaLabelledBy"/>
|
aria-haspopup="listbox" :aria-expanded="overlayVisible" :aria-labelledby="ariaLabelledBy"/>
|
||||||
|
@ -40,6 +40,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler';
|
||||||
import ObjectUtils from '../utils/ObjectUtils';
|
import ObjectUtils from '../utils/ObjectUtils';
|
||||||
import DomHandler from '../utils/DomHandler';
|
import DomHandler from '../utils/DomHandler';
|
||||||
import Ripple from '../ripple/Ripple';
|
import Ripple from '../ripple/Ripple';
|
||||||
|
@ -83,6 +84,7 @@ export default {
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
outsideClickListener: null,
|
outsideClickListener: null,
|
||||||
|
scrollHandler: null,
|
||||||
searchTimeout: null,
|
searchTimeout: null,
|
||||||
currentSearchChar: null,
|
currentSearchChar: null,
|
||||||
previousSearchChar: null,
|
previousSearchChar: null,
|
||||||
|
@ -91,6 +93,8 @@ export default {
|
||||||
beforeUnmount() {
|
beforeUnmount() {
|
||||||
this.restoreAppend();
|
this.restoreAppend();
|
||||||
this.unbindOutsideClickListener();
|
this.unbindOutsideClickListener();
|
||||||
|
this.unbindScrollListener();
|
||||||
|
this.scrollHandler = null;
|
||||||
this.overlay = null;
|
this.overlay = null;
|
||||||
},
|
},
|
||||||
updated() {
|
updated() {
|
||||||
|
@ -307,6 +311,7 @@ export default {
|
||||||
this.appendContainer();
|
this.appendContainer();
|
||||||
this.alignOverlay();
|
this.alignOverlay();
|
||||||
this.bindOutsideClickListener();
|
this.bindOutsideClickListener();
|
||||||
|
this.bindScrollListener();
|
||||||
|
|
||||||
if (this.filter) {
|
if (this.filter) {
|
||||||
this.$refs.filterInput.focus();
|
this.$refs.filterInput.focus();
|
||||||
|
@ -316,6 +321,7 @@ export default {
|
||||||
},
|
},
|
||||||
onOverlayLeave() {
|
onOverlayLeave() {
|
||||||
this.unbindOutsideClickListener();
|
this.unbindOutsideClickListener();
|
||||||
|
this.unbindScrollListener();
|
||||||
this.$emit('hide');
|
this.$emit('hide');
|
||||||
this.overlay = null;
|
this.overlay = null;
|
||||||
},
|
},
|
||||||
|
@ -347,6 +353,23 @@ export default {
|
||||||
this.outsideClickListener = null;
|
this.outsideClickListener = null;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
bindScrollListener() {
|
||||||
|
if (!this.scrollHandler) {
|
||||||
|
const { id } = this.$attrs;
|
||||||
|
this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.container, id, () => {
|
||||||
|
if (this.overlayVisible) {
|
||||||
|
this.hide();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
this.scrollHandler.bindScrollListener();
|
||||||
|
},
|
||||||
|
unbindScrollListener() {
|
||||||
|
if (this.scrollHandler) {
|
||||||
|
this.scrollHandler.unbindScrollListener();
|
||||||
|
}
|
||||||
|
},
|
||||||
search(event) {
|
search(event) {
|
||||||
if (!this.visibleOptions) {
|
if (!this.visibleOptions) {
|
||||||
return;
|
return;
|
||||||
|
@ -562,4 +585,4 @@ input.p-dropdown-label {
|
||||||
.p-fluid .p-dropdown .p-dropdown-label {
|
.p-fluid .p-dropdown .p-dropdown-label {
|
||||||
width: 1%;
|
width: 1%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in New Issue