1. #1
    Sencha User
    Join Date
    Jul 2007
    Posts
    19
    Vote Rating
    0
    zaunaf is on a distinguished road

      0  

    Default Keyboard Navigation Field Focus Problem

    Keyboard Navigation Field Focus Problem


    Hello all,

    I believe i'm not the only one irritated by this problem. I have been trying to build a web application with mouseless user experience in mind. I stumbled upon focusing problem. To get a feel, please see this page http://plasma07.pramindo.com/hotspot/

    Please try navigating trough the fields using tabs, and on the "Date" field, please use arrow DOWN key. Select the date by pressing ENTER. Notice that when after the cursor get back to the Date's edit field, when we press TAB, instead of navigating to the next field (test 3), it jumps back to first field. It doesn't happen when the datemenu is not expanded (just try navigating from first field to the last one using tab without expanding the datefield).

    Current workaround is to set setTimeout(function(){ nextField.focus(); }, 100) on each field but it's not a clean solution for a huge number of fields. It happens in firefox. The key won't work in IE 6, but using mouse to expand the datemenu, the next TAB switched correctly to the next field. Is this a firefox bug ? I used the last version of firefox, 2.0.0.12. Is there any clean workaround exists?

    For additional info: in the forms I wrote, I forced the focus to the next field after the date (a text field) using setTimeout & focus(). After editing the text field, when I press TAB, strangely the focus also jumps back to the first field (an ux.Multiselect you can see the focus bracket). It also happens when an Ext.Msg.alert fired. It seems like whenever a floating component shown, the focus went there and stay out of the form. And then after the floating component closed, when the TAB is pressed the focus goes back from the start.

    Any help will be greatly appreciated... Thanks before !!

  2. #2
    Ext JS Premium Member NOSLOW's Avatar
    Join Date
    Feb 2008
    Location
    Morrisville, NC
    Posts
    162
    Vote Rating
    -1
    NOSLOW is an unknown quantity at this point

      0  

    Default


    Yes, I agree that is a problem. Another issue is with tab strips (or collapsed panels): There doesn't appear to be a way to navigate between them with the keyboard by default. I suppose you have to set up all the event handlers yourself to deal with it.

    I'd like to hear how others have addressed this and other keyboard navigation issues. Anyways, can't really complain with such an awesome framework.

  3. #3
    Sencha User
    Join Date
    Jul 2007
    Posts
    19
    Vote Rating
    0
    zaunaf is on a distinguished road

      0  

    Default


    After more hours reading trough the code, I strongly believe that the problem can be simply overcome by altering the datefield source code, and put some code returning the focus on datemenu collapse to the field... The same thing can be done with Ext.Msg, an additional option specifying where to return focus. on But off course the great folks at ext js has more authority to do so.. I just hope they'd read this thread

    But anyway, ExtJS support for keyboard navigation has been awesome.. Hopefully some minor upgrades here and there to bring mouseless experience to perfection will power this already awesome framework to a higher level..

    NOSLO: For the mean time, i guess we can play using Ext.override to add functionalities we wished for into the existing components..

    Thanks!

  4. #4
    Sencha User
    Join Date
    Feb 2008
    Posts
    194
    Vote Rating
    -1
    hpet is an unknown quantity at this point

      0  

    Default


    I also experience the same. When closing datepicker cursor is set back to the datefield, but not realy. Tabbing forward moves focus somewhere completely else (in my case another window grid header row).

    I have read that ff has some issues with this due to its event model. Checking the source code it appears this has been taken into account (setTimeout workaround), but still not working for some reason.

  5. #5
    Ext User
    Join Date
    Mar 2010
    Posts
    1
    Vote Rating
    0
    tce is on a distinguished road

      0  

    Default


    Hello, I'm also having exactly the same problem and can't get any workaround to work. When I change the focus manually, the tabbing order starts to behave as expected, but as long as I am trying to change the focus programatically after closing the DateMenu (also trying various timeouts etc.), the cursor goes to the top of the page after next tab key press.

    Did anyone have more success solving that?

Thread Participants: 3