4

I'm working on an app that utilizes an observable array to present an editable table of userID information. The app works fantastic in Chrome, but I'm having issues getting it to work with Firefox. For my purposes, these two browsers are the only ones that I care about for now.

I'm using the "click to edit" functionality through the hasfocus binding in knockout, and it works great with Chrome. Whenever the username is selected, it becomes editable, a save button presents itself, and upon clicking "Save" the info is posted as a JSON string. Firefox doesn't seem to get far enough in the process to post, and it behaves strangely when focus is removed.

There is quite a bit of code so I've prepared this Fiddle to show the problem. Chrome works fine, Firefox not so much.

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

Thanks for any help at all! Hopefully it's something small I'm missing.

SteveHNH
  • 109
  • 1
  • 9
  • Yeah, that's weird. If you click and don't edit, it works fine, but if you change it the textbox won't disappear as expected. – Matt Burland Jan 23 '13 at 14:54
  • 1
    Interestingly, example 2 on the knockout documentation for [hasfocus](http://knockoutjs.com/documentation/hasfocus-binding.html) seems to have the exact same problem in FF. Perhaps you should report it as a bug? – Matt Burland Jan 23 '13 at 14:56
  • 1
    Your fiddle is not loading for me, but there is a bug that has been fixed and not released yet here: https://github.com/SteveSanderson/knockout/issues/554. You might want to confirm the behavior in 2.1 vs. 2.2. – RP Niemeyer Jan 23 '13 at 14:59
  • It looks like dropping down to 2.1 fixes the issue in Firefox. The bad news is that it seems to break the app in Chrome :P. Its' not the end of the world though. I can wait until the fix is implemented into release. Thanks for the help! – SteveHNH Jan 23 '13 at 15:33

1 Answers1

3

After fiddling with this for a while, I discovered that the problem was Firefox removing focus from the edit field before I was able to click the "Save" button. In order to get around that, I used the knockout throttle extension.

I used throttle to add a 400ms wait time before the editing binding was updated to false. This also seemed to fix the issue with Firefox displaying both the new text and input field at the same time. I've pasted the offending line, and the updated fiddle below:

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

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

SteveHNH
  • 109
  • 1
  • 9