Conflicting keyboard shortcuts with text input

[mathewparet]

I have trouble writing into text field when hotkeys are enabled!

I am trying to achieve something like a Gmail style of keyboard shortcuts. So this is my current mapping:

1. To move the pointer up of down a list of items - j for next item and k for the previous item
2. For other items I have shortcuts like s for suspending, a for activate, x for delete, etc.
3. To focus on the search box - /
4. To unfocus (blur) from search box - esc

The component with search box and its hotkey definitions are used withing another component which has a list of items and hotkeys actions on that list.

Now when I press /, as expected focus goes to the search box. But then when I try to type something in the search box that has the letter s, then it enters s in search but along with that s for suspend is also executed.

How can I make sure hotkeys s, a, and x doesn't run when the search box is in focus?

[hatboysam]

I had this issue and I just wrap all my shortcut callback functions like this:

function wrapCallback(fn: Function) {
  return (e: Event) => {
    let inEditableField = false;
    if (document && document.activeElement) {
      const tagName = document.activeElement.tagName;
      inEditableField =
        tagName === "INPUT" || tagName === "TEXTAREA" || tagName === "SELECT";
    }

    if (!inEditableField) {
      fn();
    }
  };

Working for me so far!