Problems with Hasfocus binding to Firefox

Question

I am working on an application that uses an observable array to represent an editable table of user identifier information. The application works fine in Chrome, but I am having problems working with Firefox. For my purposes, these two browsers are the only ones I'm worried about right now.

I use the "click to edit" function using the hasfocus binding in the knockout, and works fine with Chrome. Whenever a username is selected, it becomes editable, a save button appears, and after clicking Save, the information is published as a JSON string. It seems that Firefox does not go far enough in the publishing process, and it behaves strangely when the focus is removed.

There is quite a lot of code, so I prepared this script to show the problem. Chrome works just fine, Firefox doesn't have much.

http://jsfiddle.net/stevehnh/GNssr/

Thanks for any help! I hope something small is missing me.

Answer 1

After a lot of work, I found that the problem was that Firefox was removing focus from the edit box before I could click the "Save" button. To get around this, I used a throttle extension.

I used throttle to add a 400 ms latency before the editing binding was updated to false . This also seems to fix the issue when Firefox simultaneously displays both new text and an input field. I pasted the line of violation and the updated fiddle below:

editing: ko.observable(false).extend({ throttle: 400 }),

http://jsfiddle.net/stevehnh/GNssr/2/