Committing changes when slickgrid loses focus (revisited)

[stryecho]

I am trying to commit a cell edit when the user clicks anywhere off the grid. I've seen this issue:

           https://github.com/mleibman/SlickGrid/issues/104

So I tried using

       $('.slick-viewport').on('blur', 'input.editor-text', function (e) {
            Slick.GlobalEditorLock.commitCurrentEdit();
        });

and

       $('.slick-viewport').on('focusout', function(e){
                // commit
        }

but they both seem to generate an error in jQuery

Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is no longer a child of this node. Perhaps it was moved in a 'blur' event handler? 

Its seems as though the blur or focusout event gets fired twice. If I trigger off an event such as a button click (similar to http://stackoverflow.com/questions/7519796/how-to-make-cell-save-when-slickgrid-looses-focus) or mouseleave event, then it works fine. In our situation, though, the button is not intuitive, and the mouseleave event is too twitchy (e.g. the user accidently moves the mouse out of the way).

I am using the code from example 4

 http://mleibman.github.io/SlickGrid/examples/example4-model.html

and added the following lines:

        $('.slick-viewport').on('blur', 'input.editor-text', function (e) {
            Slick.GlobalEditorLock.commitCurrentEdit();
        });

at line 338 (just before the //initialize the model after the events... comment). I am using Slickgrid v2.2, jQuery 1.10.2 and jQueryUI 1.10.3. But I have tried it with older versions of jQuery (1.7.2) and jQueryUI (1.8.16) with similar results.

[stryecho]

I am also using Chrome (Version 32.0.1700.76 m) with the console debugger open to display the error message. There doesn't seem to be an error with IE9 or Firefox (26.0)

[toddself]

I got around this issue by wrapping my blur handler in a timeout.

$('.slick-viewport').on('blur', 'input.editor-text', function (e) { 
  window.setTimeout(function(){
    Slick.GlobalEditorLock.commitCurrentEdit();
  },  0);
});

It seems to be that commit the current edit changes the underlying structure of the DOM -- which means jQuery is then trying to remove an element that was already removed by committing it. The timeout just causes the command to run in the next frame allowing jQuery to run first.