1. #1
    Sencha User NightAvatar's Avatar
    Join Date
    Nov 2008
    Location
    Norway
    Posts
    206
    Vote Rating
    0
    NightAvatar is on a distinguished road

      0  

    Default [2.2.1] Using the calendar kills tabindex

    [2.2.1] Using the calendar kills tabindex


    I just noticed a bug (?) that occurs when I select a date using the datePicker. The date field is in focus (with the selected date as a value) but when I tab it doesn't go to the next form field, it goes to a navigation link at the top of the page - the first link in the html code!

    Note that no fields or links on the page have a tabindex, so the standard/default tab order should be followed. This occurs only in Firefox (2 and 3).

    Is this a known error or is there something wrong with my code?

    Thanks!

  2. #2
    Sencha User deanoj's Avatar
    Join Date
    Mar 2008
    Location
    Yorkshire, England.
    Posts
    183
    Vote Rating
    0
    deanoj is on a distinguished road

      0  

    Default


    Well it also happens with my application - good spot!
    Deano J - Yorkshire, England.

    A supporter of JavaScript, Caffeine and The Toon
    ------------------------------------------------

  3. #3
    Sencha User NightAvatar's Avatar
    Join Date
    Nov 2008
    Location
    Norway
    Posts
    206
    Vote Rating
    0
    NightAvatar is on a distinguished road

      0  

    Default


    Thanks Dean.

    Looks it's not just me then. I hope the EXT-support gurus can take a look at this and come with a code-fix or hack I can use to fix the problem. It kind of ruins the accessibility (use without mouse) of my form so I think it's important to resolve.

    Cheers!

  4. #4
    Sencha User NightAvatar's Avatar
    Join Date
    Nov 2008
    Location
    Norway
    Posts
    206
    Vote Rating
    0
    NightAvatar is on a distinguished road

      0  

    Default


    Has this really got you guys stumped? Yippi! Do I get a prize?!!

  5. #5
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,527
    Vote Rating
    379
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Sure you do... Your prize will be better Ext.

    Moving this thread to bugs.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  6. #6
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


    can't reproduce this in my app. the datepicker works as expected on FF3 / Safari.

    [edit]
    could you post a simple a test case?
    came up with a simple test case though -- the problem only manifests consistently when the form is long (i.e. when scrolling is involved) AND no explicit tabIndex exists for the form fields.
    Code:
    Ext.ns('Ext.ux.form');
    
    // simple spacer ux
    Ext.ux.form.Spacer = Ext.extend(Ext.BoxComponent, {
        height: 26,
        autoEl: 'div'
    });
    Ext.reg('spacer', Ext.ux.form.Spacer);
    
    
    Ext.onReady(function(){
        new Ext.Viewport({
            layout: 'fit',
            items: {
                xtype: 'form',
                autoScroll: true,
                items: [{
                    xtype: 'spacer',
    //* quick switch block
                    height: 1200
    /*/
                    height: 12
    //*/
                }, {
                    xtype: 'datefield',
                    fieldLabel: 'Test Date'
                }, {
                    xtype: 'textfield',
                    fieldLabel: 'Test Field'
                }]
            }
        });
    });
    repeat the following steps with the spacer ux height set to 12 first, then 1200 (by fiddling with the comments in the quick-switch block in red):
    1. click the datepicker icon
    2. select a date
    3. try tabbing to the next field -- focus goes somewhere, but not to the text field

    additionally, once a date is picked using the datepicker, while the datefield is still focused, typing a date into the datefield's <input> field and then tabbing also moves the focus to somewhere on the page, but not to the text field.

    the reason i'm not seeing this in my app (which has long scrolling forms) is because i programatically add a tabIndex to all my form fields.

  7. #7
    Sencha User NightAvatar's Avatar
    Join Date
    Nov 2008
    Location
    Norway
    Posts
    206
    Vote Rating
    0
    NightAvatar is on a distinguished road

      0  

    Default


    Thanks Mystix. That's correct.

    For me, the form doesn't even need to be long. Any amount of elements will cause the error, as long as none have a set tabindex.

  8. #8
    Ext User
    Join Date
    Apr 2009
    Posts
    4
    Vote Rating
    0
    ThornTech is on a distinguished road

      0  

    Default


    This bug is affecting my application as well. Has anyone been able to determine a work around?

  9. #9
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,505
    Vote Rating
    52
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    It just needs to focus the input field on select of a date from the picker.

  10. #10
    Ext User
    Join Date
    Mar 2009
    Location
    Russia, Perm
    Posts
    1
    Vote Rating
    0
    savage is on a distinguished road

      0  

    Default


    Quote Originally Posted by Animal View Post
    It just needs to focus the input field on select of a date from the picker.
    It doesn't work. The focus is set on the input field so I can change its value. When I try to tab to the next field - focus goes to the first element on the current browser (firefox 3) window, but not to the next component of the form.