Results 1 to 5 of 5

Thread: [4.2.1] Focus wrapping round in modal windows doesn't consider tabindex value

    Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Ext JS Premium Member
    Join Date
    Dec 2011
    Posts
    23

    Default [4.2.1] Focus wrapping round in modal windows doesn't consider tabindex value

    REQUIRED INFORMATION

    Ext version tested:

    • Ext 4.2.1

    Browser versions tested against:
    • Firefox
    • Chrome

    Description: New field focus management (wrapping round) on modal window doesn't consider tabindex. First and last fields are erroneously detected according to dom order. If dom order is different from tabindex order, some fields can be skipped.

    Steps to reproduce the problem:
    • Load provided test case
    • Set focus on first field
    • Press TAB key many times

    The result that was expected:
    • Focus enter in every field as tabindex order
    • When exiting last window field, come back to first field

    The result that occurs instead:
    • Focus enter in fields as tabindex order but skip Email field (come back to first field on exiting City field)
    • Cause is City is last dom field (but not last tabindex field)

    Test Case:
    Code:
     Ext.create('Ext.window.Window', {
        title: 'Contact Info',
        width: 600,
        bodyPadding: 10,
        modal: true,
        renderTo: Ext.getBody(),
        layout: 'absolute',
        items: [{
            xtype: 'textfield',
            x: 10, y: 10,
            name: 'name',
            fieldLabel: 'Name',
            tabIndex: 1
        }, {
            xtype: 'textfield',
            x: 10, y: 40,
            width: 524,
            name: 'address',
            fieldLabel: 'Address',
            tabIndex: 3
        }, {
            xtype: 'textfield',
            x: 10, y: 70,
            name: 'code',
            fieldLabel: 'City code',
            tabIndex: 4
        }, {
            xtype: 'textfield',
            x: 10, y: 100,
            width: 524,
            name: 'email',
            fieldLabel: 'Email Address',
            tabIndex: 6
        }, {
            xtype: 'textfield',
            x: 300, y: 10,
            name: 'firstname',
            fieldLabel: 'First name',
            tabIndex: 2
        }, {
            xtype: 'textfield',
            x: 300, y: 70,
            name: 'city',
            fieldLabel: 'City',
            tabIndex: 5
        }]
    }).show();
    HELPFUL INFORMATION

    Debugging already done:

    • Ext.util.Floating.onKeyDown : focusables = me.el.query(':focusable');

    Possible fix:
    • focusables should be sorted by tabindex :
      focusables = Ext.Array.sort(focusables, function (item1, item2) {return item1.tabIndex - item2.tabIndex;});

    Additional CSS used:
    • only default ext-all.css

    Operating System:
    • Win 7 Pro

    Test Case: It can be worse
    Code:
     Ext.create('Ext.window.Window', {
        title: 'Contact Info',
        width: 600,
        bodyPadding: 10,
        modal: true,
        renderTo: Ext.getBody(),
        layout: 'absolute',
        items: [{
            xtype: 'textfield',
            x: 10, y: 40,
            width: 524,
            name: 'address',
            fieldLabel: 'Address',
            tabIndex: 3
        }, {
            xtype: 'textfield',
            x: 10, y: 10,
            name: 'name',
            fieldLabel: 'Name',
            tabIndex: 1
        }, {
            xtype: 'textfield',
            x: 10, y: 70,
            name: 'code',
            fieldLabel: 'City code',
            tabIndex: 4
        }, {
            xtype: 'textfield',
            x: 10, y: 100,
            width: 524,
            name: 'email',
            fieldLabel: 'Email Address',
            tabIndex: 6
        }, {
            xtype: 'textfield',
            x: 300, y: 10,
            name: 'firstname',
            fieldLabel: 'First name',
            tabIndex: 2
        }, {
            xtype: 'textfield',
            x: 300, y: 70,
            name: 'city',
            fieldLabel: 'City',
            tabIndex: 5
        }]
    }).show();

  2. #2
    Sencha User slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165

    Default

    Thanks for the report!
    FocusManager will actually only follow the DOM order (ignoring element attributes like tabIndex). But, I think we can do a better job of describing how the FocusManager class works within the API documentation.

  3. #3
    Ext JS Premium Member
    Join Date
    Dec 2011
    Posts
    23

    Default

    FocusManager isn't enabled in the test case. It's only a standard floating window with new ExtJs 'TAB' focus looping.
    For me it's OK since I've added a temporary (crappy) override. I hope I can delete it with next ExtJs release.

    Code:
    Ext.define('Ext.dom.AbstractElement_traversalOverride', {
        override: 'Ext.dom.AbstractElement',
    
        query: function(selector) {
            /*MOD*/
            if (selector == ':focusable')
                return Ext.Array.sort(Ext.DomQuery.select(selector, this.dom),
                                      function (item1, item2) {return item1.tabIndex - item2.tabIndex;});
            else
            /*END MOD*/
                return Ext.DomQuery.select(selector, this.dom);
        }
    });

  4. #4
    Ext JS Premium Member
    Join Date
    Dec 2011
    Posts
    23

    Default

    Another problem with Ext.query(':focusable') and focus wrapping.
    Create a new modal window with to textfields.
    If you add a button it's taken in account in the loop -> OK (you can exclude it from the loop with "tabIndex: -1", so it's ignored)
    If you add a button with "disabled: true" (or dynamicly calling disable()), then it's still taken in account in focusables list but it can't get focus -> KO (setting "tabIndex: -1" doesn't change anything)

    In this test case, click in first textfiled, press "TAB", focus go to second textfield. Press "TAB" again, focus is bloqued because Ext is trying to set focus to disabled button.

    Code:
    Ext.create('Ext.window.Window', {
        title: 'Contact Info',
        width: 600,
        bodyPadding: 10,
        modal: true,
        renderTo: Ext.getBody(),
        items: [{
            xtype: 'button',
            text: 'Button',
            disabled: true
        }, {
            xtype: 'textfield',
            name: 'name',
            fieldLabel: 'Name'
        }, {
            xtype: 'textfield',
            name: 'email',
            fieldLabel: 'Email Address'
        }]
    }).show();

  5. #5
    Sencha User slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165

    Default

    Thanks for the additional information / case. I've added these notes to the ticket as well.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •