Tips for capturing the b-form-input event that triggers the deletion of the input value

I've been on a mission to uncover the secret behind detecting the event triggered by clicking the x icon in a b-form-input of the type 'search':

https://i.sstatic.net/YSxjD.png

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 experimented with various event handlers like @emptied, @reset, @close, @cancel, @drop... but none seem to be triggered.
What could I be overlooking? Could it be that Bootstrap Vue doesn't support it? The documentation didn't offer any solutions.
Do I have no choice but to rely on the standard @change event (and check if the input is empty)?

typescriptformsvue.jseventsbootstrap-vue

Answer №1

Avoid using the non-standard search event

The search input in HTML5 emits a non-standard search event when the clear button x is clicked, but it also triggers when the Enter key is pressed. So, it is recommended to check the text value in the event handler to determine if the input was cleared.

Opt for the input or change event instead

It is advisable to use the input or change event instead, as stated in the MDN documentation:

This feature is non-standard and should not be used on production sites as it may not work for all users. There could also be significant differences 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')
  }
}

Keep in mind that this will also trigger when the Enter key is pressed on an empty input field.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using jQuery to assign the input value to a <p> element

Despite searching extensively on both this site and Google, I have not been able to find an answer that suits my specific requirements. I have a form with an input text field. After submitting the form, I want the value of this field to appear in a <p& ...

jqueryformsinput

Tips for incorporating padding into your Vuetify navbar

I attempted to apply padding to the Vuetify navbar using the px-number attribute, but unfortunately, it did not take effect. I included this code snippet, but the padding did not appear as expected: <v-app-bar color="deep-purple accent-4" dar ...

vue.jsvuetify.js

Create a flexible string for refining a REST request

I am currently working on constructing a dynamic string and I've encountered an issue, so I humbly seek assistance from the community. I have a string for creating a rest call filter, but I am struggling with the use of and's This query only fu ...

reactjsstringtypescriptrestdynamic-programming

Enhancing Communication Between JavaScript and PHP

Positioned within my form is an input field where users can enter their postcode. The shipping cost for their order will be determined based on this postcode, utilizing PHP to assign different costs depending on the zone. After the user enters their postc ...

javascriptphpforms

Having difficulty removing Vue from my Ubuntu system

Hey there, I've been using WSL and trying to run my Vue project with version 2.9.0, but when I check the version with vue -V, it shows 2.9.6. I've attempted uninstalling Vue CLI using both npm uninstall @vue/cli and npm uninstall -g @vue/cli, bu ...

vue.jswindows-subsystem-for-linux

How about setting variables in Vue router as an alternative to controlling component visibility?

Utilizing URL parameters to set variables in my Vue application is a goal of mine. While I initially thought vue-router would be the perfect solution, it appears to be more catered towards handling the showing and hiding of components within a router-view ...

vue.jsvue-router

Troubleshooting problems with deploying a full stack application on Azure Static Web Apps

I've been struggling with this issue for a week now and any suggestions would be greatly appreciated! I'm working on a catalog website for a client. My server and database are hosted on Azure SQL, while the frontend is built using vue.js compiled ...

azurevue.jshostingviteazure-static-web-app

The type '{}' is lacking the 'submitAction' property, which is necessary according to its type requirements

I'm currently diving into the world of redux forms and typescript, but I've encountered an intriguing error that's been challenging for me to resolve. The specific error message reads as follows: Property 'submitAction' is missing ...

javascriptreactjstypescriptreduxredux-form

After updating from angular4 to angular 5, the npm test is failing with the error message "TypeScript compilation cannot find test.ts file"

After upgrading my app from Angular4 to Angular 5 using the steps provided on https://update.angular.io/, I encountered an issue. While I can successfully run ng-serve and ng build without any problems, the npm test command for ng test is failing with the ...

angulartypescriptangular-upgrade

Deactivate the selection option in Syncfusion NumericTextbox

I have integrated an Angular NumericTextbox component from Syncfusion into my application. A problem we encountered is that when the input is clicked, it automatically gets selected. Is there a way to disable this behavior? Problem: https://gyazo.com/a72b ...

htmlangulartypescriptsyncfusionnumeric-textbox

What is the best way to display a loading screen while simultaneously making calls to multiple APIs?

I'm currently working with Angular 8 to develop an application that retrieves responses from various APIs for users. The application is designed to simultaneously call multiple APIs and I require a loading indicator that stops once each API delivers a ...

cssangulartypescripthttp

Incorporating additional properties into a TypeScript interface for a stateless, functional component within a React Native application

When following the React Native documentation for consistent styling, a recommendation is made to create a <CustomText /> text component that encapsulates the native <Text /> component. Although this task seems simple enough, I'm facing d ...

reactjstypescriptreact-nativereact-props

Utilizing Angular 2's pipe functionality with dynamic parameters

Currently I am diving into Angular2/Ionic2 and trying to grasp the concept of Pipes. Everything was going smoothly until I faced a roadblock in the form of a specific problem related to temperatures. Let me illustrate my issue with an example involving te ...

angulartypescript

The type 'number[]' is lacking the properties 0, 1, 2, and 3 found in the type '[number, number, number, number]'

type spacing = [number, number, number, number] interface ISpacingProps { defaultValue?: spacing className?: string disabled?: boolean min?: number max?: number onChange?: (value: number | string) => void } interface IFieldState { value: ...

javascriptreactjstypescript

Tips for creating a console.log wrapper specifically designed for Angular2 using Typescript

Is there a way to create a custom global logging function in Angular 2 TypeScript project that can be used instead of console.log for services and components? I envision the function looking like this: mylogger.ts function mylogger(msg){ console.log ...

javascripttypescriptangular

What is the best way to trigger a mat-menu to open with just one click, while also automatically closing any other open menus at

I've encountered an issue where if there are multiple menus in the header, opening a menu for the first time works fine. However, if a menu is already open and I try to open another one, it doesn't work as expected. It closes the previously opene ...

angulartypescriptangular-material

What is the optimal approach for setting up multiple routes for a single component in Vue router?

I have recently started learning Vue router and have set up the routes to navigate to the HomeView component like this: import { createRouter, createWebHistory } from 'vue-router' import HomeView from '../views/HomeView.vue' const rout ...

vue.jsvue-router

Exploring the power of Vue's v-for directive with nested

I have an array within an array that I want to showcase in a table. However, I am struggling to display my nested array correctly. Here is how my data set looks: [ { "dd":"February", "md":[ { "dag":"2020-02-01" }, { "d ...

arraysvue.jsnestedv-for

Load information into a different entity

I need help with adding new values to an existing object. When I receive some form data from noteValue, I also have additional input data in my component under person that I would like to integrate into noteValue before saving it. let noteValue = form.va ...

javascriptangulartypescript

retrieve the returned data to be shown within the Vue model

I am struggling to display a simple set of data in my Vue model that is received from a method. I have tried adding the data to my object or array, but nothing seems to work. Typically, just using vm.array name or object name should work on success, but I ...

vue.js