Tabbing & KeyPressHandler differences Across Different Browsers

[cjustice]

I've come across an issue where my code behaves fine in Firefox, but differently in Google Chrome and Safari.

I have written code that adds a KeyPressHandler to a FloatItem and looks for a tab. In Firefox this works fine. In Chrome the KeyPressHandler fires for the tab on the field prior to the FloatItem in the form. It doesn't fire when a tab is pressed while focused on the FloatItem itself.

Here is the code (it is attached as well):

package com.smartgwt.sample.client;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.core.KeyIdentifier;
import com.smartgwt.client.util.EventHandler;
import com.smartgwt.client.util.KeyCallback;
import com.smartgwt.client.util.Page;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.form.DynamicForm;
import com.smartgwt.client.widgets.form.fields.FloatItem;
import com.smartgwt.client.widgets.form.fields.FormItem;
import com.smartgwt.client.widgets.form.fields.TextItem;
import com.smartgwt.client.widgets.form.fields.events.KeyPressEvent;
import com.smartgwt.client.widgets.form.fields.events.KeyPressHandler;
import com.smartgwt.client.widgets.layout.VLayout;

public class TabbingIssue implements EntryPoint {

	private DynamicForm form;

    public void onModuleLoad() {

        
		KeyIdentifier debugKey = new KeyIdentifier();
		debugKey.setCtrlKey(true);
		debugKey.setKeyName("D");

		Page.registerKey(debugKey, new KeyCallback() {
			public void execute(String keyName) {
				SC.showConsole();
			}
		});

        VLayout example = new VLayout();
        
        form = new DynamicForm();
        form.setNumCols(4);
        TextItem text1 = new TextItem();
        FloatItem float1 = makeFloatItem();
        TextItem text2 = new TextItem();
        FloatItem float2 = makeFloatItem();
        
        form.setItems(text1, float1, text2, float2);
        example.addMember(form);
        
        
        example.draw();
    }
    
    private FloatItem makeFloatItem() {
    	FloatItem floatItem = new FloatItem();
        floatItem.addKeyPressHandler(new KeyPressHandler() {
			@Override
			public void onKeyPress(KeyPressEvent event) {
				System.out.println("User hit key: " + event.getKeyName());
				if (("Tab".equals(event.getKeyName()) == true)
						&& (EventHandler.shiftKeyDown() == false)) {
					FormItem fields[] = form.getFields();
					FormItem currentItem = event.getItem();
					FormItem lastItem = fields[fields.length - 1];
					if (currentItem.equals(lastItem)) {						
						event.cancel();					
						addNewRow();
					}
				}
			}
		});
        
        return floatItem;
    }
    
	protected void addNewRow() {
		FormItem fields[] = form.getFields();
		FormItem moreFields[] = new FormItem[fields.length + 2];
		System.arraycopy(fields, 0, moreFields, 0, fields.length);
		moreFields[fields.length] = new TextItem();
		moreFields[fields.length + 1] = makeFloatItem();

		form.setFields(moreFields);
		form.redraw();
		moreFields[fields.length].focusInItem();

		
	}

}

My intent here was to allow a user to enter data in a form, tabbing after each field entry to move on to the next. When the user tabs out of the last field, a new row would be added to the form and focus moved there.

Version info:

SmartClient Version: v8.2p_2012-04-10/Enterprise Deployment (built 2012-04-10)

Google Chrome: 18.0.1025.168
Firefox: 11.0
Safari: 5.1

[Isomorphic]

Just so you know, this issue has been assigned to an engineer and we'll update this thread when there is something to report.

[cjustice]

Thank you, looking forward to what is found.

[Isomorphic]

Hi
There is a browser-specific bug here in the 3.0p branch.
It has already been resolved in the 3.1d branch.

You can workaround the problem in 3.0p by using a keyDown handler rather than a keyPress handler to check for Tab keypresses (and cancelling the event should also prevent the native browser behavior of shifting focus).

One other note: Your sample code is taking live form items retrieved from a form via 'form.getFields(...)' and then calling setItems with these same items.
You can't reuse live items embedded in a form in this way. Instead you should create new FormItem instances and pass these into setItems or setFields.
(You should see warnings in the developer console if you reuse existing items and you may encounter various unexpected behaviors).

Regards
Isomorphic Software

[cjustice]

I will try the KeyDownHandler because I'm not in a position to take an unreleased version (3.1).

I'm using live FormItems retrieved from form.getFields() because I want to grow the form dynamically. Is there a way to dynamically add FormItems to a DynamicForm? It will be real cumbersome to re-construct the FormItems already in the form just to add new FormItems to it.

[Isomorphic]

We don't currently have an 'addItem()' type API - this is slated for the future, but post-3.1

For now we'd recommend you refactor your code to centrally build the set of items you need in a way that can be called both when you initially create the form and when you need to update with additional fields.

Regards
Isomorphic Software