[4.1b2] Tooltip steals focus when hidden

[sumit.madan]

Test case in post below

If a text field has focus and a tooltip is shown (anywhere in the application). When the tootip is hidden (either by using hide() or if the tooltip display timeout expires), the focus is no longer on the text field and is lost.

This becomes an irritating issue when forms have tooltip on items and also contain text fields. As soon as any tooltip gets shown and is then hidden, user no longer has focus on the text field he was editing.

[mitchellsimoens]

What browser are you seeing this on? I opened the Dynamic form example and focused on the first text field which has allowBlank : false. I then tab to the next one and the error icon shows in the first text field. Focus being on the 2nd field, I mouse over the error icon which produces a tip but the 2nd field still has focus.

[sumit.madan]

A little investigation revealed that it happens when tooltip is in a modal window. Run the example below and type something in the text box, then hover mouse over checkbox which shows the tooltip. Move mouse away from checkbox, as soon as the tooltip is hidden, the focus is lost.

Ext.define('UI.form.LoginDialog', {
    extend: 'Ext.window.Window',
    requires: ['Ext.layout.container.Border', 'Ext.form.Panel', 'Ext.form.field.Checkbox'],
    alias: 'widget.logindialog',

    width: 420,
    height: 130,
    title: 'Login',
    modal: true,

    formPanel: undefined,

    initComponent: function() {
        var config = {};
        Ext.applyIf(this, Ext.apply(this.initialConfig, config));

        this.usernameField = {
            xtype: 'textfield',
            name: 'data[User][username]',
            fieldLabel: 'Username',
            validateOnBlur: false,
            allowBlank: false
        };

        this.passwordField = this.passwordField || {};
        this.passwordField = {
            xtype: 'textfield',
            inputType: 'password',
            name: 'data[User][password]',
            fieldLabel: 'Password'
        };

        this.rememberMeField = this.rememberMeField || {};
        this.rememberMeField = Ext.Object.merge({
            xtype: 'checkbox',
            itemId: 'rememberMe',
            name: 'data[User][rememberme]',
            padding: '0 0 0 80',
            boxLabel: 'Remember me on this computer',
            listeners: {
                render: function(checkbox) {
                    checkbox.bodyEl.child('input').set({
                        'data-qtip': 'This is not recommended for shared computers.'
                    });
                },
                scope: this
            }
        }, this.rememberMeField);

        this.formPanel = this.formPanel || {};
        this.formPanel = Ext.create('Ext.form.Panel', Ext.Object.merge({
            bodyPadding: 10,
            header: false,
            region: 'center',
            border: false,
            waitMsgTarget: true,
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            defaults: {
                labelWidth: 75
            },
            items: [
                this.usernameField,
                this.passwordField,
                this.rememberMeField
            ]
        }, this.formPanel));

        this.items = [this.formPanel];

        this.callParent(arguments);
    }
});

Ext.require('UI.form.LoginDialog');

Ext.onReady(function() {
    Ext.tip.QuickTipManager.init();
    
    var loginDialog = Ext.create('UI.form.LoginDialog', {});

    loginDialog.show();
});

[sumit.madan]

bump

[sumit.madan]

Any chance a fix can come in 4.1.1?

[sonata82]

Fixing this issue seems to be on the road map for 4.2.

[Animal]

I think this was EXTJSIV-5450 which was fixed in 4.1.3