[Firefox] Knockout hasfocus binding failing with number input on firefox

[Anand Srivastava]

I have an input field that holds currency value. I am trying to display formatted currency amount when the input field does not have focus. The input type is set to number. While this works fine on Chrome, IE and Edge; on firefox, the input textbox loses focus immediately after getting it. Here is the simplified jsfiddle

https://jsfiddle.net/nkkfmLmc/2/

This is similar to example 2 at http://knockoutjs.com/documentation/hasfocus-binding.html, except for the number field. The problem is resolved if I change the input type to text from number (but also lose all the goodness).

Any pointers or workarounds would be appreciated.

HTML:

<p>

    Name: 

    <b data-bind="visible: !editing(), text: '$'+amount(), click: edit">&nbsp;</b>

    <input type="number" min="0" max="100" step="1" data-bind="visible: editing, value: amount, hasFocus: editing" />

</p>

<p><em>Click the amount to edit it; click elsewhere to apply changes.</em></p>

JS:

function PersonViewModel(amount) {

    // Data

    this.amount = ko.observable(amount);

    this.editing = ko.observable(false);

         

    // Behaviors

    this.edit = function() { this.editing(true) }

}

 

ko.applyBindings(new PersonViewModel(51.22));

[Gunnar Liljas]

This is a Firefox issue. I suggest you Google for the issue, perhaps in combination with "Angular", since the principle is similar.

/G

--
You received this message because you are subscribed to the Google Groups "KnockoutJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to knockoutjs+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Anand Srivastava]

Got it working by using an extra observable to control visibility and adding a throttle to the observable that controls focus.
looks like the hasFocus check was happening before the element had become visible.

https://jsfiddle.net/nkkfmLmc/8/