As a user field focussing and tabbing should work well in dialogs (MGNLUI-1978)

[MGNLUI-2788] Support of RETURN/ENTER key to confirm forms & dialogs Created: 03/Apr/14  Updated: 10/Apr/14  Resolved: 10/Apr/14

Status: Closed
Project: Magnolia UI
Component/s: user interaction
Affects Version/s: 5.2.3
Fix Version/s: None

Type: Sub-task Priority: Major
Reporter: Christopher Zimmermann Assignee: Unassigned
Resolution: Duplicate Votes: 0
Labels: None
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Issue Links:
duplicate
duplicates MGNLUI-2673 Support of ESC and ENTER in dialogs, ... Closed
Template:
Date of First Response:

 Description   

Pressing Enter key should submit a form, the same as pushing the Save or Confirm button. But this shortcut key should not trigger the action if the focus is currently in a textarea or richtextfield, because a user may simply want to add an enter.
It is straightforward to add the ENTER key handling (see BaseDialogPresenter), its hard to prevent it from firing when textarea has focus. Vaadin does not provide a mechanism to know which field has focus.

Failed attempts:
I tried handling the enter key with BaseDialogPresenter#addShortcut method and alternatively with a shortcut on the Confirm button via

Button commitButton = (Button)(editorActionAreaView.getViewForAction(BaseDialog.COMMIT_ACTION_NAME).asVaadinComponent());
        commitButton.setClickShortcut(KeyCode.ENTER);

With both those methods - the following failed:

  • Wrapping the textarea in a Panel. (In a last ditch effort to create a different shortcut scope that did not include the textarea.
  • Creating a Vaadin gtw extension that captured all keyboard events and stopped their propogation.
    (https://vaadin.com/book/vaadin7/-/page/gwt.extension.html)
    pw.addDomHandler(new KeyPressHandler() {
                @Override
                public void onKeyPress(KeyPressEvent event) {
                    event.stopPropagation();
                    event.getNativeEvent().stopPropagation();
                    event.preventDefault();
                    event.getNativeEvent().preventDefault();
                }
            }, KeyPressEvent.getType());
    

    The textarea was extended with this.
    That this did not work makes me think that the vaadin keyboard handling works with the Javascript event CAPTURE phase rather then the BUBBLE phase, so that the button cannot stop the propogation of the event to the dialog, because the dialog got the event before the textarea did.

Possible Approaches:
Overall the Vaadin keyboard shortcut handling is limited and hard to scope - I could see dropping it in favor of a custom approach.
1.
Specific to this case, I could see creating another vaadin extension to apply to the dialog, and handle the keyboard events in there instead of in the BaseDialogPresenter. Handle them on the client side. For one, you could make sure to catch only the BUBBLING events so that the field could cancel them. Or you could do an explicit check if the focused element is a textarea.
2.
The RichTextArea is actually not a problem, if you are in it the ENTER key does not confirm the dialog - I guess thats because it is in an iframe. I dont think its pretty - but the TextArea could also put itself in an iframe.



 Comments   
Comment by Jozef Chocholacek [ 04/Apr/14 ]

What about adding a FieldEvents.FocusListener and FieldEvents.BlurListener (from the com.vaadin.event package) to the Field constructed by the TextFieldFactory, that will turn off/on the ENTER key handling in case that the TextField has more than one row, i.e. it is represented by a TextArea?

Comment by Christopher Zimmermann [ 10/Apr/14 ]

Its easy to implement as part of MGNLUI-3673

Generated at Mon Feb 12 09:00:09 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.