Clear field of autocomplete

[Epo]

How can i react on the clear button/icon for the autocomplete?

[spectrolite]

It seems like you can’t.
But when clicked, it clears the v-model, so you could watch the v-model for a sudden reset and react to that…
That seems like a good solution while we wait for @rstoenescu to expose a hook to the clear event.

[spectrolite]

http://beta.quasar-framework.org/components/search.html#Vue-Events
@change(newVal) Triggered on model value change.

[n.taddei]

@spectrolite I thought the same thing, but newVal may be '' (empty string) even when I manually delete all the content, because @change will be raised every time I change the search input content.

[spectrolite]

you are correct.
but there’s still a way
to manually delete all content, you need focus in the element, and then you need to select the whole content, and then press backspace.
that gives u 3 events to watch for, that together (u really dont need all 3) mean that @change is “manual”, u can use that to inhibit your handler.
On the other hand, a “clear” has none of the same characteristics, except it results in v-model’s value = ’ ’ . It also requires a click on a certain DOM element.
whenever @change is fired, check for empty value, then check that your “manual” flag is not set: both true => that was a clear click.
i agree it seems convoluted, but it should do the trick.
there’s like 36 ways of doing this depending on what you watch for, I’d say choose the simplest path (personally I’d watch for focus target and any keypress and refine from there).

i’m sure Razvan will make the corresponding event available, if not in 0.14, at least in 0.15

[n.taddei]

There are other possibly events, like deleting one per one every letter or delete a single letter. I think it’s not so easy to understand when empty button was clicked.
However, maybe you can find a workaround, but it’s never like doing it natively. I believe that once @rstoenescu is back from his vacation, he’ll be able to add the event listener in a minute.

Cheers