How to disable keystrokes when focus on input, textarea, select?

[maximelebreton]

Hello, and thanks for your work!

I would like to know how disable keystrokes when the focus is on an input, a textarea or a select, like the filter function of hotkeysjs: https://github.com/jaywcjlove/hotkeys-js#filter

Thanks

[RobertWHurst]

My suggestion would be to create a utility function to filter these events.

import { KeyComboEvent, bindKeyCombo } from "@rwh/keystrokes";
import { BrowserKeyComboEventProps } from "@rwh/keystrokes/dist/browser-bindings";

// NOTE: This type will be added to Keystrokes in the next release
type BrowserKeyComboEvent = KeyComboEvent<KeyboardEvent, BrowserKeyComboEventProps, {}>

// Craft yourself a small utility function to filter out events your not interested in.
const shouldFilter = (e: BrowserKeyComboEvent) => {
  const browserEvent = e.finalKeyEvent.originalEvent
  const target = (browserEvent.target ?? browserEvent.srcElement) as HTMLElement;
  const tagName = target.tagName;

  return (
    target.isContentEditable ||
    tagName == 'INPUT' ||
    tagName == 'SELECT' ||
    tagName == 'TEXTAREA'
  )
}

bindKeyCombo('a + b', (e) => {
  // when your filter utility returns true then return early.
  if (shouldFilter(e)) return

  console.log('Do something cool, but only if not in an input')
});

The main annoyance here is the fact that it's a bit cumbersome to type out the event type. I plan on fixing these for TypeScript users in the next release by including convenance types for browser binding associated key event and key combo events.

[RobertWHurst]

Ok I've just published 1.4.0, and it contains BrowserKeyComboEvent one does not need to define it themselves now.

[RobertWHurst]

Going to close this issue for now, but let me know if you have thoughts on this.