Browser dependant keyboard handling

Vaadin 6 / 7 / 8 Framework UI
1

Hi,

I stumbled upon a little difference in the keyboard handling. I have a NativeSelect connected as follows:

  reportTypeNS = new NativeSelect(null, Arrays.asList(reportTypes));
  reportTypeNS.setNullSelectionAllowed(false);
  reportTypeNS.setImmediate(true);
  reportTypeNS.addListener(this);
...
  public void valueChange(ValueChangeEvent event)
  {
    if (event.getProperty() == reportTypeNS)
    {
      // react on selected report type via event.getProperty().getValue();
      ...
    }
  }

The difference I found is, that the event listener is not always called when the selection of the NativeSelect is changed with the
keyboard up/down keys
. Some browsers need to press
ENTER
after the selection has changed.

IE9: triggers event with up/down keys (ok)
Safari 5.1.2: triggers event ONLY when
ENTER
is pressed after selection has changed
Chrome 16.0.912.77: triggers event ONLY when
ENTER
is pressed after selection has changed
Opera 11.61: triggers event with up/down keys (ok)
Firefox 9.0.1: triggers event ONLY when
ENTER
is pressed after selection has changed

A similar effect happens when the user pressed the ENTER key inside a TextField:

  searchTF = new TextField();
  searchTF.setImmediate(true);
  searchTF.addShortcutListener(new AbstractField.FocusShortcut(searchTF,
          ShortcutAction.KeyCode.S, ShortcutAction.ModifierKey.ALT,
          ShortcutAction.ModifierKey.SHIFT));
  searchTF.addListener(this);
...
  public void valueChange(ValueChangeEvent event)
  {
    if (event.getProperty() == searchTF)
    {
			// react on search word via event.getProperty().getValue();
      ...
    }
  }

Here the difference is, that Opera need the
TAB key pressed
 in order to trigger the event.

IE9: triggers event with enter keys (ok)
Safari 5.1.2: triggers event with enter keys (ok)
Chrome 16.0.912.77: triggers event with enter keys (ok)
Opera 11.61: triggers event
ONLY
when TextField loses focus (i.e. via TAB key)
Firefox 9.0.1: triggers event with enter keys (ok)

I don’t know if this different behaviour is done on purpose, but I think it should be the same on all browsers. That’s one of the main reasons why we choosed Vaadin :slight_smile:

Regards

Andreas

2

Hi,

I recall there has been som discussion about this, and opinions vary… For the ‘native’ type components, one can argue that it’s better that it works in the same way the user is used to, since they look ‘native’. Note that most users do not switch between browsers, and are used to the way their browser of choice works.
But.
When this can make developing difficult in some situations, when you can not trust all browsers will behave the same. And this is, as you note, not what you expect from Vaadin. (And the TextField thing sounds like a bug to me.)

This is IMHO something we should take a close look at again.

Best Regards,
Marc

3

Marc,

thank you for your reply. I can understand the different opinions regarding the native behaviour of each browser. In my case, the content of the window will change when the value of the NativeSelect is changed. This leads to some irritating state when the window content is NOT showing what the NativeSelect is showing (when the selection is changed via keyboard and the event is not fired).

The Opera TextField behaviour is in my opinion more important. Will you file a ticket for that?

Thanks

Andreas