Keyboard Shortcuts Not Executing When Focused in RichTextArea

Has anyone tried executing Keyboard Shortcuts while focused in a RichTextArea? I’m using Vaadin 8.1.5, and my shortcuts work without fail unless I am focused in a RichTextArea.

I have a View containing (among other layouts and components) a Tabsheet. There are 14 tabs. Each contains a CssLayout which wraps other content, among which is a form. I’m setting focus in the form(s) on the first editable item. On many tabs the form contains only a RichTextArea and three textfields that are readonly. They contain user/timestamp information that is pulled from the backend. I focus on the first editable item (in most cases a RichTextArea) via the TabSelectListener so they are always focused appropriately on tab selection.

Because this is an enterprise system, keyboard shortcuts are extremely important. The users are accustomed to a legacy system that was a Rich Client. They had a lot of shortcuts. I use Ctrl + (Right Arrow) to advance to the next tab and Ctrl + (Left Arrow) to go back to the previous tab. However, if I am focused in the RichTextArea, the shortcuts execute at the browser level, as if I had clicked outside the Ui and moved focus to the browser. While Ctrl + (Right Arrow) and Ctrl + (Left Arrow) do nothing at the browser level in Chrome or Firefox, I have set up Ctrl + S as a form submit/select (depending on context), so this is how I know the View and Ui are losing focus. I have also tested it with a RichTextArea that was outside of the TabSheet. The result is still the same.

Of course, I can always tell my users to click inside the View once they are finished entering data in a RichTextArea, and if there are other components in the form they will tab to, it make no difference. However, it is cumbersome if they are flipping through the tabs to get to say the 9th one but not entering data in the others. The process would literally be: Shortcut, Click, Shortcut, Click, etc… I know they’re not going to care for it.

Has anyone experienced this? And if so, do you have any workarounds? I’m stumped.

My guess is that RichTextArea component is (possibly on purpose?) eating the keydown events that would otherwise bubble up to the UI, where the shortcut handling happens. One thing you could try is the KeyActions add-on:

If that doesn’t work, you’ll need to solve the issue in a client-side extension / JavaScript snippet.


Thanks, Olli! The RichTextArea is definitely using the Ctrl + (Right Arrow) and Ctrl + (Left Arrow). They are working inside the component rather like a tab in a word processor, moving the cursor over for indention. Not my code definitely, but I understand why the bahavior would be desireable. The routing of other shortcuts, that the area was not using, up to the browser rather than the Ui was a bit surprising.

I will investigate these options and go from there. Much appreciated!