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>