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

Select: use InputText for filter element

pull/5677/head
tugcekucukoglu 2024-05-02 17:10:28 +03:00
parent 243937c302
commit 1ea0731a18
1 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
components/lib/select/Select.vue
View File

@ -77,7 +77,7 @@
<slot name="header" :value="modelValue" :options="visibleOptions"></slot> <slot name="header" :value="modelValue" :options="visibleOptions"></slot>
<div v-if="filter" :class="cx('header')" v-bind="ptm('header')"> <div v-if="filter" :class="cx('header')" v-bind="ptm('header')">
<div :class="cx('filterContainer')" v-bind="ptm('filterContainer')"> <div :class="cx('filterContainer')" v-bind="ptm('filterContainer')">
<input <InputText
ref="filterInput" ref="filterInput"
type="text" type="text"
:value="filterValue" :value="filterValue"
@ -85,6 +85,9 @@
@vue:updated="onFilterUpdated" @vue:updated="onFilterUpdated"
:class="cx('filterInput')" :class="cx('filterInput')"
:placeholder="filterPlaceholder" :placeholder="filterPlaceholder"
:invalid="invalid"
:variant="variant"
:unstyled="unstyled"
role="searchbox" role="searchbox"
autocomplete="off" autocomplete="off"
:aria-owns="id + '_list'" :aria-owns="id + '_list'"
@ -92,7 +95,7 @@
@keydown="onFilterKeyDown" @keydown="onFilterKeyDown"
@blur="onFilterBlur" @blur="onFilterBlur"
@input="onFilterChange" @input="onFilterChange"
v-bind="ptm('filterInput')" :pt="ptm('filterInput')"
/> />
<slot name="filtericon" :class="cx('filterIcon')"> <slot name="filtericon" :class="cx('filterIcon')">
<component :is="filterIcon ? 'span' : 'SearchIcon'" :class="[cx('filterIcon'), filterIcon]" v-bind="ptm('filterIcon')" /> <component :is="filterIcon ? 'span' : 'SearchIcon'" :class="[cx('filterIcon'), filterIcon]" v-bind="ptm('filterIcon')" />
@ -185,6 +188,7 @@ import ChevronDownIcon from 'primevue/icons/chevrondown';
import SearchIcon from 'primevue/icons/search'; import SearchIcon from 'primevue/icons/search';
import SpinnerIcon from 'primevue/icons/spinner'; import SpinnerIcon from 'primevue/icons/spinner';
import TimesIcon from 'primevue/icons/times'; import TimesIcon from 'primevue/icons/times';
import InputText from 'primevue/inputtext';
import OverlayEventBus from 'primevue/overlayeventbus'; import OverlayEventBus from 'primevue/overlayeventbus';
import Portal from 'primevue/portal'; import Portal from 'primevue/portal';
import Ripple from 'primevue/ripple'; import Ripple from 'primevue/ripple';
@ -662,7 +666,7 @@ export default {
this.alignOverlay(); this.alignOverlay();
this.scrollInView(); this.scrollInView();
this.autoFilterFocus && DomHandler.focus(this.$refs.filterInput); this.autoFilterFocus && DomHandler.focus(this.$refs.filterInput.$el);
}, },
onOverlayAfterEnter() { onOverlayAfterEnter() {
this.bindOutsideClickListener(); this.bindOutsideClickListener();
@ -978,6 +982,7 @@ export default {
ripple: Ripple ripple: Ripple
}, },
components: { components: {
InputText,
VirtualScroller, VirtualScroller,
Portal, Portal,
TimesIcon, TimesIcon,