TextButton Focus / Tab Index Issue

[FEAT]

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:

<!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>

[IgyBoy]

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

[Colin Alworth]

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.

[FEAT]

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?

[Colin Alworth]

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.

[darrellmeyer]

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

[Konstantin.Scheglov]

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.

[PhiLho]

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.

[FEAT]

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.

[darrellmeyer]

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.