Bound <input type='text' /> wont update when cleared using <input type="reset" />; any workaround?

[Simon Svensson]

Reproduction code:
<input type="text" data-bind="value: CurrentFilter" />
<input type="reset" />

I've tested this in Chrome, FireFox and Internet Explorer.
CurrentFilter isn't updated when pressing the reset button. A
workaround would be to bind a click-action on the reset button, but
that would mess up the real reason I'm trying this.

Attempted code:
<input type="search" data-bind="value: CurrentFilter" />

A <input type="search" /> renders (in latest version of Chrome) as a
textbox, but with a X when a value is entered. Clicking the X clears
the textbox, just like the <input type="reset" />. However, it wont
trigger the change-event (it seems), so CurrentFilter still contains
the previous value.

Any known workaround?

[rpn]

I was looking into this a little bit and it seems that there is no special event that fires when the X is clicked.  However, the click event for the input field is triggered.  So, the workaround appears to be checking if the field is empty, but the view model value is not.  Then, setting the view model value to be empty.

Here is a sample with a possible implementation of a "reset" binding to make this happen: http://jsfiddle.net/rniemeyer/vrbzv/  (will only show the "X" in Chrome).  This doesn't fix the reset button, but does fix the "X" on the search field.

Hope this helps.

[Peter S]

And if it's any help I've added a custom value binding that will
respond when the form is reset, though it's currently dependent on
jQuery:

http://jsfiddle.net/PeteSutcliffe/4gb4z/