Hybrid View

    Success! Looks like we've fixed this one. According to our records the fix was applied for EXTGWT-1460 in a recent build.
  1. #1
    Ext GWT Premium Member
    Join Date
    Jan 2012
    Location
    Linz, Austria
    Posts
    23
    Vote Rating
    1
    FEAT is on a distinguished road

      0  

    Default TextButton Focus / Tab Index Issue

    TextButton Focus / Tab Index Issue


    Hi!

    I have written a dialog window (GXT 3.0 beta 2), and am having the following problems tabbing through the dialog fields:

    In all browsers tested so far, the first tabbing through the controls just marks the controls, the second cycling actually sets the focus to the controls. Considering the buttons:
    • In IE8, the buttons never got the focus
    • In Firefox 10, there is a dotted line displayed to the left of the button that should get the focus, neither pressing the enter button nor pressing the spacebar triggers the button.
    • In Opera 11.61, the focus enables the buttons to be pressed by using the enter button.
    Best Regards,
    Peter


    Here comes the uibinder code:

    Code:
    <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
    <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
        xmlns:g="urn:import:com.google.gwt.user.client.ui" xmlns:container="urn:import:com.sencha.gxt.widget.core.client.container"
        xmlns:form="urn:import:com.sencha.gxt.widget.core.client.form"
        xmlns:button="urn:import:com.sencha.gxt.widget.core.client.button"
        xmlns:gxt="urn:import:com.sencha.gxt.widget.core.client">
    
        <ui:style>
            .errorlabel {
                color: #ff0000;
                background-image: none;
            }
        </ui:style>
    
        <ui:with
            type="com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer.VerticalLayoutData"
            field="verticalLayoutData">
            <ui:attributes width="1" height="-1" />
        </ui:with>
    
        <ui:with
            type="com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer.VerticalLayoutData"
            field="errorFieldLayoutData">
            <ui:attributes width="1" height="25" margins="{errorFieldMargins}" />
        </ui:with>
    
        <ui:with type="com.sencha.gxt.core.client.util.Margins" field="errorFieldMargins">
            <ui:attributes top="0" right="0" bottom="5" left="0" />
        </ui:with>
    
        <gxt:Window headingText="Login" modal="true" closable="false" width="240" height="165">
            <container:VerticalLayoutContainer>
                <container:child layoutData="{verticalLayoutData}">
                    <form:FieldLabel text="User Name">
                        <form:widget>
                            <form:TextField ui:field="nameField" tabIndex="1"
                                allowBlank="false" />
                        </form:widget>
                    </form:FieldLabel>
                </container:child>
                <container:child layoutData="{verticalLayoutData}">
                    <form:FieldLabel text="Password">
                        <form:widget>
                            <form:PasswordField ui:field="passwordField"
                                tabIndex="2" allowBlank="false" />
                        </form:widget>
                    </form:FieldLabel>
                </container:child>
                <container:child layoutData="{verticalLayoutData}">
                    <form:FieldLabel text="User Role">
                        <form:widget>
                            <form:ComboBox ui:field="roleComboBox"
                                tabIndex="3" allowBlank="false" />
                        </form:widget>
                    </form:FieldLabel>
                </container:child>
                <container:child layoutData="{errorFieldLayoutData}">
                    <g:Label ui:field="errorLabel" addStyleNames="{style.errorlabel}" />
                </container:child>
                <container:child>
                    <container:HBoxLayoutContainer pack="END">
                        <button:TextButton text="Ok" ui:field="okButton"
                            tabIndex="4" />
                        <button:TextButton text="Cancel" ui:field="cancelButton"
                            tabIndex="5" />
                    </container:HBoxLayoutContainer>
                </container:child>
            </container:VerticalLayoutContainer>
        </gxt:Window>
    </ui:UiBinder>

  2. #2
    Sencha User
    Join Date
    Jul 2011
    Posts
    25
    Vote Rating
    1
    IgyBoy is on a distinguished road

      0  

    Default Same thing in Beta3

    Same thing in Beta3


    I can also confirm this bug using Beta3.
    Also, I tried adding FocusHandler to button,but focusEvent never got fired.

  3. #3
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,734
    Vote Rating
    90
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      0  

    Default


    Thanks for reporting this. With the template written as it is, there is nothing that can be focused on (divs don't accept focus by default), so something will need to be given a tabindex, and be instructed to handle key events to 'click' the button.

  4. #4
    Ext GWT Premium Member
    Join Date
    Jan 2012
    Location
    Linz, Austria
    Posts
    23
    Vote Rating
    1
    FEAT is on a distinguished road

      0  

    Default


    Hi Colin,

    the text buttons HAVE a tab index set. Does this mean, that buttons are not in the tab sequence by default and cannot be pressed by using the keyboard (space or enter) by default?

  5. #5
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,734
    Vote Rating
    90
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      0  

    Default


    The Component might have it set, but the dom elements don't, so the browser doesn't know to set focus there when the user hits tab - that is what the html attribute tabindex is for.

    That can be set with an alternate appearance, but it won't cause the button to be 'clicked' by keyboard action, that requires some additional event logic in the TextButtonCell.

  6. #6
    Sencha - GXT Dev Team darrellmeyer's Avatar
    Join Date
    May 2007
    Location
    Washington, DC
    Posts
    2,242
    Vote Rating
    2
    darrellmeyer is on a distinguished road

      0  

    Default


    This is now fixed in SVN. Buttons have a tabindex and now visually show when focused.

    You can see this here:

    http://staging.sencha.com:8080/examp...buttonaligning

  7. #7
    Sencha User
    Join Date
    Jan 2009
    Posts
    46
    Vote Rating
    0
    Konstantin.Scheglov is on a distinguished road

      0  

    Default


    What is the reason to make TextButton focusable if nor Space nor Enter handled as "click"?
    I understand that this probably can be done by custom key handler, but may be this should be default behavior?
    Just idea/question, not really bug report.
    Konstantin Scheglov

  8. #8
    Sencha User PhiLho's Avatar
    Join Date
    Nov 2011
    Location
    Near Paris, France
    Posts
    140
    Vote Rating
    1
    PhiLho is on a distinguished road

      0  

    Default


    I agree with Konstantin, most GUI frameworks I used so far have a default keyboard behavior for most components, including the button, accepting Return or Space as button pressing. Not doing that is odd, and a bit against usability.

  9. #9
    Ext GWT Premium Member
    Join Date
    Jan 2012
    Location
    Linz, Austria
    Posts
    23
    Vote Rating
    1
    FEAT is on a distinguished road

      0  

    Default


    Focus and tabbing look good, but I agree: in every GUI framework I know, a focused button can be triggered either by pressing the space bar or enter without specialized key handler. In enterprise applications, I want to be able to work without having to grab the mouse each time I want to trigger a functionality via a button.

  10. #10
    Sencha - GXT Dev Team darrellmeyer's Avatar
    Join Date
    May 2007
    Location
    Washington, DC
    Posts
    2,242
    Vote Rating
    2
    darrellmeyer is on a distinguished road

      0  

    Default


    The space bar and enter key do cause the button to be selected. This code was added at the same time we fixed the focus and tab index issues. In this example:

    http://staging.sencha.com:8080/examp...buttonaligning

    Space and enter key show the info popup. Is this not the case for you? If you are still seeing issue please provide more information including browser and version.