Prevent textbox lost of focus in popup when onmouseover is triggered on another div (extjs)

Question

I don't know if this is a browser general issue or if it is related to my code but here is my issue :

Lets say my page contains a link and a menu. I click the link and a popup opens [it contains a textfield or datefield]. When the popup is loaded, the textfield receives focus and the caret appears in the textfield : I can write. Now If i push my cursor on the side and it hovers on the menu, the focus changes and I can't continue writing in the textfield.

Is there a way to fix that ? I've googled it a bit but to no success.

Answer 1

Since you are using an Ext.Window, the browser doesn't know that things behind the window aren't invalid to hover or otherwise interact with. Indeed, someone actually might want their users to be able to interact with the main page behind the window. However, if you don't want this behavior, and the window is supposed to be the only thing the user interacts with, you are looking for modal: true. This will put a mask over the rest of the page, and no hovers or clicks will be applied to anything on the main page.

Example:

new Ext.Window({
    modal: true
    width: 400,
    height: 600,
    layout: 'fit',
    items: ...
});

Answer 2

I do face the same issue with the following setup 1. using Ext.widget(widg) to create and open (show) a popup window 2. the widg is defined with modal: true configuration 3. one of widg's items is a form with several fields (fields are dynamically created and each time the form might contain different number of fields)

the issue: when I move the mouse out of the form's area (the mouse even stays inside the popup are), the filed that was on focus looses the focus. Happens 100% of the times.

Thanks, Charlie