Prevent Hotkeys from triggering utility bar in LWC

Question

In Salesforce Lightning Experience if you have items in the Utility Bar, sometimes pressing a key will trigger a widget to open. For example, if you press the "H" key, this opens the "History" tab if you have it on the Utility Bar.

In a lightning web component, I have a tag that uses the contenteditable="true" property. I'm doing this to display some text that is uniquely color-coded and can be updated from the user directly.

The issue i'm running into is, certain keys are triggering the utility tabs to open, so if the user types in "h" then this opens the history tab rather then adding "h" to the text.

Does anyone know if it's possible to disable these hotkeys or know of a clever way to prevent those specific events from occurring onkeydown?

Thanks, Tom

Answer 1

For your own code, you should be able to stop the default handlers from firing by adding an event listener to your own element:

connectedCallback() {
  this.template.querySelector('some-element').addEventListener(
    'keydown',
    this.keyDownHandler
  );
  ...
}
disconnectedCallback() {
  this.template.querySelector('some-element').removeEventListener(
    'keydown',
    this.keyDownHandler
  );
  ...
}
keyDownHandler(event) {
  event.stopPropagation();
}

By stopping propagation from your component, the handlers should be effectively disabled. Note that you must also remember to remove the handler when you're disconnected from the DOM, or Bad Things™ may happen.

I don't have the time at the moment to set up a test, but it seems reasonable that you should be able to block keyboard input from your own element leaking into the top-level components.

Answer 2

You can’t customize keyboard shortcuts in Lightning Experience.

Keyboard Shortcuts for Lightning Experience

Additional Notes:

Keyboard shortcuts aren’t case-sensitive. For example, Shift+B is the same as Shift+b. If Ctrl, Alt, or Shift is part of the shortcut, the sequence of the keys doesn’t matter. For example, Ctrl+Alt+A is the same as Alt+Ctrl+A. For shortcuts that specify “then,” release the first key, or key combo, before typing the next key. The comma isn’t part of the shortcut. Keyboard shortcuts are supported on U.S. and U.K. keyboards. Shortcuts that include / (forward slash) and . (period) aren't supported on other language keyboards. Lightning Experience keyboard shortcuts don’t work on Salesforce Classic apps viewed in Lightning Experience or in Visualforce or iFramed components.

Answer 3

Although it makes sense to intercept the events and prevent keyboard shortcuts, I wasn't able to do so using javascript.

However, after discovering the same topic on this thread: Disable keyboard shortcuts in lightning experience, all I had to do was add this class to my div: "cke_editable".

In short the html looks something like this:

<div class="cke_editable slds-border_top slds-border_right slds-border_bottom slds-border_left" contenteditable="true">

This class works to prevent keyboard-shortcuts from opening items in the utility bar.