How to catch the b-form-input event that deletes the input value

user_917492 0
Viewed 1290

I have tried myself and searched extensively to find out how to catch the event that is triggered when you click x icon in a b-form-input of the type 'search':

Screenshot of b-form-input of search type

template:

<b-form-input
    id="filter-input"
    type="search"
    v-model="filter"
    @keydown.enter="onFilterChange(filter)"
    @emptied.native="resetFilter(emptiedEvent)"
/>

script:

public resetFilter(event: any) {
  console.log("todo: resetFilter");
}

I tried different event handlers: @emptied, @reset, @close, @cancel, @drop... None of them seem to fire.
What am I missing? Is there none in Bootstrap Vue, possibly? The docs didn't help.
Is the only way to use the standard @change event (checking if the input value was emptied)?

bootstrap-vue vue.js typescript forms events
1 Answers

The non-standard search event that you shouldn't use

The HTML5 search input does emit a non-standard search event when you click the x but unfortunately it also emits that when you press Enter, so you will have to check the text value in the handler to determine if the input was cleared.

Use the input or change event instead

But I would recommend using input or change instead if that works for your purposes, because of this caveat from the MDN docs:

This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

<b-form-input
    id="filter-input"
    type="search"
    v-model="filter"
    @keydown.enter="onFilterChange(filter)"
    @search="resetFilter"
/>

resetFilter() {
  if(!this.filter) {
    console.log('search cleared')
  }
}

Be aware that this will also trigger when you press enter on an empty input.

user_21850930
Related