Skip to content

Commit

Permalink
feat(SelectMenu): allows to clear search query on close only
Browse files Browse the repository at this point in the history
  • Loading branch information
DarkGhostHunter committed Nov 17, 2023
1 parent ee38dfd commit e4ac05d
Show file tree
Hide file tree
Showing 2 changed files with 1 addition and 30 deletions.
19 changes: 1 addition & 18 deletions docs/content/3.forms/4.select-menu.md
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ props:

#### Clear on close

The search query is not cleared when the menu is closed. You can clear it by setting `clear-search-on-close` to `true`.
By default, the search query will be kept after the menu is closed. To clear it on close, set the `clear-search-on-close` prop.

::component-card
---
Expand All @@ -116,23 +116,6 @@ props:
---
::

#### Clear on update

The search query is not cleared when an option is selected. You can clear it by setting `clear-search-on-update` to `true`.

::component-card
---
baseProps:
class: 'w-full lg:w-40'
placeholder: 'Select a person'
searchable: true
searchablePlaceholder: 'Search a person...'
options: ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
props:
clearSearchOnUpdate: true
---
::

### Async search

Pass a function to the `searchable` prop to customize the search behavior and filter options according to your needs. The function will receive the query as its first argument and should return an array.
Expand Down
12 changes: 0 additions & 12 deletions src/runtime/components/forms/SelectMenu.vue
Original file line number Diff line number Diff line change
Expand Up @@ -295,10 +295,6 @@ export default defineComponent({
type: Boolean,
default: false
},
clearSearchOnUpdate: {
type: Boolean,
default: false
},
popper: {
type: Object as PropType<PopperOptions>,
default: () => ({})
Expand Down Expand Up @@ -437,12 +433,6 @@ export default defineComponent({
}
}
function clearOnChange () {
if (props.clearSearchOnUpdate) {
query.value = ''
}
}
watch(container, (value) => {
if (value) {
emit('open')
Expand All @@ -454,8 +444,6 @@ export default defineComponent({
})
function onUpdate (event: any) {
clearOnChange()
if (query.value && searchInput.value?.$el) {
query.value = ''
// explicitly set input text because `ComboboxInput` `displayValue` is not reactive
Expand Down

0 comments on commit e4ac05d

Please sign in to comment.