Modal dialogs can be bypassed

[brian.moeskau]

BTW, I looked at Meebo, but I cannot find a modal dialog anywhere, just a bunch of floating windows. Where is the example you mentioned?

[Animal]

If you wanted to try something like this, you'd want to preserve the original disabled state of each element, rather than simply enabling them all after hide.

The code I posted only re-enables those items that were disabled on dialog show.

I'd say that's the best way to do it. It is basically what's needed. All input items under the mask to be disabled.

Another option is a document keydown handler enabled when a modal dialog is shown (perhaps by the DialogManager) which stops any keydown event if the target is not within an element of selector ".x-dlg#" + topMostDialog.id

Where the DialogManager knows which is the topmost Dialog.

    if (!Ext.fly(event.getTarget()).findParent(".x-dlg#" + topmostDialog.id, document.body)) {
        event.stopEvent();
    }

[brian.moeskau]

The code I posted only re-enables those items that were disabled on dialog show.

Right you are. That's what I get for skimming

I was looking at Element.mask -- I think a truly generic solution should block the keyboard for any section of the DOM that is masked, not just beneath a dialog/window. One complication is that different areas within the source do masking in slightly different ways (not everything goes through Element.mask, some components create their own masks manually). The selector filtering approach might work if you can filter for anything beneath the mask el, but I haven't studied the code enough yet to know how that would work.

[Tim Siney]

It struck me a simple solution to this would be to have a listener applied to the dialog div/object which is fired when it looses focus. That way as soon as the user tabbed to an underlying field, the focus would be re-applied to the dialog, making it appear truly modal. The psuedo-code would be thus:

dialog.onBlur(){
dialog.focus();
}

Makes sense to me, but how that would be applied to Ext I don't know. There is some pretty clever Javascript voodoo going on in there, so no doubt it wouldn't be as simple as first appears!

[brian.moeskau]

For a dialog, something like that might work, but there are other situations to handle aside from just dialogs. I still think that the ideal solution would handle disabling any area that is masked, regardless of whether or not there's something modal happening overhead (could just be a masked data loading operation for example). The only thing that you can really rely on being available in every situation is the mask el itself.

[kato]

BTW, I looked at Meebo, but I cannot find a modal dialog anywhere, just a bunch of floating windows. Where is the example you mentioned?

Hi Brian, it's when you try to send a message (double click on a nick/user) - it opens up a modal window where tabbing seems to be restricted only to that window's elements.

here's a simpler example: http://wildbit.com/demos/modalbox/

[kato]

Just wondering if this has been resolved in the latest (unreleased) builds yet...

[bearmonger]

This still doesn't seem to be working in 1.1.1 - are there any updates on progress?

[bearmonger]

It struck me a simple solution to this would be to have a listener applied to the dialog div/object which is fired when it looses focus. That way as soon as the user tabbed to an underlying field, the focus would be re-applied to the dialog, making it appear truly modal. The psuedo-code would be thus:

dialog.onBlur(){
dialog.focus();
}

Makes sense to me, but how that would be applied to Ext I don't know. There is some pretty clever Javascript voodoo going on in there, so no doubt it wouldn't be as simple as first appears!

By the way, Tim's suggestion doesn't seem possible as the Dialog class doesn't expose any events for blur and focus.

[lgerndt]

Our QA department really wants this fixed too, and I tried Animals excellent suggestion of disabling the elements, but I found that for anchor tags at least, even though its "disabled" is true, hitting return while that element is focused still behaves enabled