jQWidgets Splitter Widget causing loss focus or event consumption

Question

I'm using a splitter from jQWidegts and am experiencing some strange behaviour when the splitter is enabled. When it's disabled the strange behaviour stops. I have created a JSFiddle of the problem - it's as simple as I could get it.

To recreate the problem:

1. Load the JSFiddle and before doing anything, mouseover the Submit button or the 'String' tab.
2. The submit button should change to a red color and the 'String' tab also changes style.
3. Next, click in some white space, for example, below the Submit button or 'String' tab.
4. Now mouseover the button or tab - the style no longer changes for either.
5. If you click again in some white-space, then mouseover, the style does change.

This is not toggle-like behaviour since clicking a third time will not prevent styling on mouseover. It only occurs the first time.

If I comment out the line that sets up the splitter:

$('#splitter').jqxSplitter(splitterConf);

then the problem goes away. Any HTML elements outside of the splitter div, not not experience this problem.

My only thought is that an event is being consumed by the splitter and not propagated. However the splitter div doesn't have any events attached to it, at least they don't show in Chrome's JavaScript debugger.

I have noticed that when white-space is clicked (to trigger the problem), an extra div element is being appended to the DOM:

<div style="width: 1680px; height: 275px; position: absolute; left: 0px; top: 0px; "></div>

This element is being appended by jqxsplitter.js in the following code:

initOverlay: function(c) {
            var b = this;
            if (b.overlay && c == undefined) {
                b.overlay.remove()
            } else {
                b.overlay = a("<div></div>");
                b.overlay.width(b.host.width());
                b.overlay.height(b.host.height());
                b.overlay.css("position", "absolute");
                b.overlay.appendTo(a(document.body));
                var d = b.host.offset();
                b.overlay.css("left", d.left);
                b.overlay.css("top", d.top)
            }

From the callstack I see it's called from _stopDrag, so it seems to be some way of preventing dragging:

_stopDrag: function(b) {
        if (b._capturedElement) {
            b._performAreaResize();
            b._capturedElement.remove()
        }
        b._capturedElement = null;
        b._initOverlay()

But I don't know why this is occurring or why it's causing a problem. Ideally someone knows what the problem is, but failing that, some tips on how to debug / move towards a solution would be good.

Answer 1

From the jQWidgets Team

This is a known issue and will be resolved in the next release.

Src: http://www.jqwidgets.com/community/topic/splitter-widget-causing-loss-focus-or-event-consumption