Firefox Select issue with jQuery UI Layout

Question

I'm running into a strange and obscure issue in jQuery UI-layout. I have a dropdown in one of my panes, and whenever you click on it, it opens, but you can select anything.

The issue seems to have occured in the past, as documented here: https://groups.google.com/forum/#!topic/jquery-ui-layout/ZaJxX3NbPx4

But in that post they said it was tied to showOverflowOnHover - an attribute I have set to false, both by default in the plugin and again in each instance.

Here is my initialization code:

$('.splitter').layout({
      resizeWhileDragging: true,
      sizable: false,
      animatePaneSizing: true,
      fxSpeed: 'slow',
      east__size: '70%',
      showOverflowOnHover: false,
      enableCursorHotkey: false
   });

   $('.splitter_inside').layout({
      resizeWhileDragging: true,
      sizable: false,
      animatePaneSizing: true,
      enableCursorHotkey: false,
      showOverflowOnHover: false,
      fxSpeed: 'slow',
      south__size: "40%"
   });

'splitter_inside' is inside of 'splitter'.

Anyone else run into this, or have any idea on how to fix it? I'm working on producing a fiddle, but having some trouble.

Answer 1

I had the same problem in Firefox where a select list menu inside a UI.Layout pane would disappear when hovered. I finally tracked it down to the interaction of the following:

1. overflow: auto on pane
2. the :before content: "" component of the micro clearfix applied to pane
3. evt.stopPropagation(); in addHover() in UI.Layout source

You can remove any one of these factors to solve the problem. However, the bigger issue seems to be bugs in the UI.Layout source code, since evt.stopPropagation(); is NOT the cause of the problem, merely a trigger. Commenting out this line will fix the problem even though this line of code doesn't run when the select list bug occurs.

I've reported the issue here: https://groups.google.com/forum/#!topic/jquery-ui-layout/pHHxkewV9ZI

Answer 2

Try this

$(function() {
    $('.ui-layout-content').click(function(e) {                                                                                             
        e.target.focus();                                                   
    });
})