Clear button in text input not updating binding

Help Requests
1

Hi gang,

I have a simple text input bound to a property like this:

 <input type="text" maxlength="20" placeholder="search" value.bind="q & debounce:500" />

With a “qChanged()” event in the associated TypeScript file reacting to changes to the bound “q” observable property. All pretty straight forward.

When Edge displays this input, it includes the little “x” button over on the right of the text box to quickly clear the text. When I click that “x” button, however, the “q” observable is not updated. It retains the value it had before the text box was cleared, and doesn’t change until I type something else into the text box. Since q never changed, the qChanged() method is not called.

Has anyone else seen this? How do you react to a text input being cleared with the “x” button in Edge (and presumably other browsers that do the same thing)?

Cheers,
Matt

1 Like
2

This is a problem with Edge not firing events for that button click so Aurelia doesnt know what happened https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/17584515/
The only workaround would be to listen to mouseup Events, check whether the value changed and perform the property change by yourself

2 Likes
3

Thanks for the reply, zewa.

I did try listening to mouseUp events by adding mouseup.delegate=“mouseUp()” and a method in my corresponding class, but I couldn’t get that to fire. Do I have the syntax right?

1 Like
4

your sample looks good. Here’s a codesandbox showing the solution. https://codesandbox.io/s/aurelia-sandbox-1yqh7

there is a bit more involved since the clear actually only happens on the next macro task so you’d have to leverage either a setTimeout, or better Aurelia’s taskqueue. In that cycle you just make sure to check the elements value against the bound value and if different you can expect the user to have clicked the clear button. There isn’t sadly any better way to perform the check I’d know of.

2 Likes
5

Thanks so much! Your sandbox code is clear and I’ll give it a try in my own project (which is just a hobby project but I like to sand off these rough edges regardless).

2 Likes