KeyboardNavigationMixin F2 customizable

[hons82]

Describe your motivation

We migrate an existing application to Vaadin. Our customers are used to F2 doing something different that we'd need to recreate

Describe the solution you'd like

Interaction mode is already triggered by enter and left by esc. F2 is an additional key that does the same, so that should be something customizable or at least there should be a way to disable it.

Describe alternatives you've considered

Our customers do want this to work, so currently I have to stoppropagate the event and with a clientcallable execute the method that the shortcut should trigger.

Additional context

It is a bit odd, to first enter the interaction mode e.g. inline editing, which in our case means loading the enter from the database. Just to execute our F2 which means a reload from the database to show the entry in a dialog for editing.

[yuriy-fix]

Dear @hons82, could you please clarify which components are affected? Could you also please provide a use-case where this functionality is applicable? (e.g. steps how user is interacting with a component)

[web-padawan]

The F2 key is used in vaadin-grid and implemented according to ARIA guidelines:

F2: If the cell contains editable content, places focus in an input field, such as a textbox. A subsequent press of F2 restores grid navigation functions. If the cell contains one or more widgets, places focus on the first widget. A subsequent press of F2 restores grid navigation functions.

https://github.com/vaadin/web-components/blob/e347a7d4fedea4fb1f944cf35be3a8dc7ac41575/packages/grid/src/vaadin-grid-keyboard-navigation-mixin.js#L231-L232

https://github.com/vaadin/web-components/blob/e347a7d4fedea4fb1f944cf35be3a8dc7ac41575/packages/grid/src/vaadin-grid-keyboard-navigation-mixin.js#L599-L601

As described by guidelines, F2 has a special meaning that is different from Enter and Esc.

As a workaround, in JS it should be possible to add global event listener with "capture" phase:

document.addEventListener(
  'keydown',
  (event) => {
    if (event.key === 'F2') {
      event.stopPropagation();
    }
  },
  true // Prevent bubbling
);

[hons82]

Sure, our problem is in the grid. What we'd like our users to do is on a grid select a line and open it in a form by pressing F2 (possibly all without touching the mouse once) and at the same time offer an inline-editing entering on a cell with enter (and exiting with ESC. Currently we use the workaround described above, but we'd prefer to use a normal shortcut and so have a way to override that default behavioral with our shortcut. Even though it is perfectly conform with the ARIA guidelines it doesn't fit well with our clients expectations unfortunately.

[rolfsmeds]

Thanks for the suggestion. Unfortunately I don't think this has enough value to be prioritized anytime soon, so I hope that workaround serves you well enough for now.