[DISCUSS] Support focusin and focusout events

[Condor]

Internet Explorer supports focusin and focusout events. Other browsers don't support this event, but they can be simulated with focus and blur events during capture phase.

Required changes:

doAdd = function() {
    var ret;
    if (win.addEventListener) {
        ret = function(el, eventName, fn, capture) {
            if (eventName == 'mouseenter') {
                fn = fn.createInterceptor(checkRelatedTarget);
                el.addEventListener(MOUSEOVER, fn, (capture));
            } else if (eventName == 'mouseleave') {
                fn = fn.createInterceptor(checkRelatedTarget);
                el.addEventListener(MOUSEOUT, fn, (capture));
            } else if (eventName == 'focusin') {
                el.addEventListener('focus', fn, true);
            } else if (eventName == 'focusout') {
                el.addEventListener('blur', fn, true);
            } else {
                el.addEventListener(eventName, fn, (capture));
            }
            return fn;
        };
    } else if (win.attachEvent) {
        ret = function(el, eventName, fn, capture) {
            el.attachEvent("on" + eventName, fn);
            return fn;
        };
    } else {
        ret = function(){};
    }
    return ret;
}(),
doRemove = function(){
    var ret;
    if (win.removeEventListener) {
        ret = function (el, eventName, fn, capture) {
            if (eventName == 'mouseenter') {
                eventName = MOUSEOVER;
            } else if (eventName == 'mouseleave') {
                eventName = MOUSEOUT;
            } else if (eventName == 'focusin') {
                eventName = 'focus';
                capture = true;
            } else if (eventName == 'focusout') {
                eventName = 'blur';
                capture = true;
            }
            el.removeEventListener(eventName, fn, (capture));
        };
    } else if (win.detachEvent) {
        ret = function (el, eventName, fn) {
            el.detachEvent("on" + eventName, fn);
        };
    } else {
        ret = function(){};
    }
    return ret;
}();

With this addition you can do stuff like:

new Ext.Window({
    title: 'Window',
    width: 300,
    height: 200,
    modal: true,
    layout: 'fit',
    defaultButton: 'focus',
    items: {
        id: 'focus',
        xtype: 'textarea',
        value: 'Try to tab out of this window'
    },
    listeners: {
        render: function(c){
            var focusCmp = Ext.getCmp(c.defaultButton);
            var focusTask = new Ext.util.DelayedTask(focusCmp.focus, focusCmp);
            c.el.on({
                focusin: function(e){
                    focusTask.cancel();
                },
                focusout: function(e){
                    focusTask.delay(10);
                }
            });
        }
    }
}).show();

which would solve the you-can-tab-out-of-a-modal-window problem.

[mystix]

+1e5!!!

(p.s. i think you've asked for this somewhere before..., but it was probably buried in another thread)

[Condor]

+1e5!!!

(p.s. i think you've asked for this somewhere before..., but it was probably buried in another thread)

Good memory. It was in the mouseenter/mouseleave thread.

[Animal]

Good idea. Ext's business is to normalize away browser differences.

[Juanito]

This would be awesome! I hate having to add focus event handlers for every input field. We have some grids that could have many many many input fields which can be time consuming when initially hooking up the handlers with a composite element, so we hardcode a handler in the html (arggghh, I know)

[Animal]

Other browsers support DOMFocusIn and DOMFocusOut so this should be added. It would simplify a lot of things.

DOMFocusIn

The DOMFocusIn event occurs when an EventTarget receives focus, for instance via a pointing device being moved onto an element or by tabbing navigation to the element. Unlike the HTML event focus, DOMFocusIn can be applied to any focusable EventTarget, not just FORM controls.

• Bubbles: Yes
• Cancelable: No
• Context Info: None

DOMFocusOut

The DOMFocusOut event occurs when a EventTarget loses focus, for instance via a pointing device being moved out of an element or by tabbing navigation out of the element. Unlike the HTML event blur, DOMFocusOut can be applied to any focusable EventTarget, not just FORM controls.

• Bubbles: Yes
• Cancelable: No
• Context Info: None

[Condor]

Other browsers support DOMFocusIn and DOMFocusOut so this should be added. It would simplify a lot of things.

Opera and WebKit support DOMFocusIn and DOMFocusOut, but Firefox is still missing support (see bugreport).

Try it on the quirksmode.org.org testpage.

[Animal]

It's a mess. Looks like this can't be done for another few years!

[Animal]

You can't do it using a capturing listener because that just says that a focus event occurred within that element. Not that focus was outside that element before. It could have been moving from one input to another within that element.

Same for blur. You can't tell whether the newly focussed element is outside the listener's element. Only that a blur occurred within it.

[Condor]

It's a mess. Looks like this can't be done for another few years!

But capture phase focus and blur events do work on all browsers (except IE), so that's what I used above.