PDA

View Full Version : [FIXED] TextButton Focus / Tab Index Issue



FEAT
10 Feb 2012, 8:00 AM
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
19 Feb 2012, 8:38 AM
I can also confirm this bug using Beta3.
Also, I tried adding FocusHandler to button,but focusEvent never got fired.

Colin Alworth
22 Feb 2012, 3:18 PM
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
23 Feb 2012, 1:44 AM
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
23 Feb 2012, 6:35 AM
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
9 Mar 2012, 10:26 AM
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/examples-dev/#ExamplePlace:buttonaligning

Konstantin.Scheglov
10 Mar 2012, 2:30 PM
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
12 Mar 2012, 1:51 AM
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
12 Mar 2012, 1:53 AM
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
16 Apr 2012, 5:50 PM
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/examples-dev/#ExamplePlace: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.

FEAT
17 Apr 2012, 12:47 AM
Looks great! Works for all tested browsers, except for Opera 11.61: button cannot be triggered via space bar, but enter key works.

WesleyMoy
3 May 2012, 6:59 PM
The fix for this bug has been included in the public release of Sencha GXT 3.0.0. You should now see the fix included in the GXT Explorer demo (http://www.sencha.com/examples/). I've also marked the linked related thread as fixed.