Tab key behavior in rich text control

It does not appear that Vaadin explicitly handles the tab key in rich text controls and, consequently, the behavior varies across browsers. In Safari and Chrome, the tab key inserts a tab via \t and in Firefox and IE it blurs the control.

Is this a correct assessment? I would love to hear that I’m simply doing something wrong.

In an attempt at cross-browser consistency, I am trying to intercept the keyDown event and force one of two possible behaviors:

  1. Always insert a tab
  2. Always blur the control

I prefer solution (1), but got stuck with IE because it only honors the white-space:pre style in quirks mode and it is my understanding is that Vaadin doesn’t support quirks mode. This leaves me with option (2), which I have implemented by calling setFocus(false) in my subclass of RichTextAreaImplSafari as follows:

@Override
public void onKeyDown(KeyDownEvent event) {
	if ( event.getNativeKeyCode() == KeyCodes.KEY_TAB )
	{
		event.preventDefault();
		setFocus(false);
	}
}

However, when the tab key is pressed nothing apparent happens. The control retains focus and the cursor does not move. This, in itself, is a verification that preventDefault() is being called, but I’ve further verified that the above code is running by replacing setFocus() with other API calls like rightIndent() and observing expected behavior.

Any suggestions how to make this work?

Can’t really say how to get that working, but you could file a ticket to get it fixed in the framework if it is possible. It looks like a GWT bug (occurs also in GWT Showcase) so it probably wouldn’t hurt filing a ticket there also.

It might not be easy to fix as there seems to be lot of differences between different browsers. My Chrome 11 (Linux) doesn’t seem to add a tab with a span, but simply doesn’t do anything (doesn’t blur either).

There seems to be some GWT
tickets
regarding odd behavior with IE and some keyboard and focus events, etc.