[@mantine/hooks] use-hotkeys: Add option to specify tags that should …

…be ignored (#3045)

* [@mantine/hooks] use-hotkeys: Add ability to specify tags to ignore

* [@mantine/hooks] use-hotkeys: update docs

docs/src/docs/hooks/use-hotkeys.mdx

@@ -15,12 +15,16 @@ import { HooksDemos } from '@mantine/demos';
 
 ## Usage
 
-use-hotkeys accepts an array of hotkeys and handler tuples:
+use-hotkeys accepts as its first argument an array of hotkeys and handler tuples:
 
 - `hotkey` - hotkey string e.g. `ctrl+E`, `shift+alt+L`, `mod+S`
 - `handler` - event handler called when given combination was pressed
 - `options` - object with extra options for hotkey handler
 
+The second argument is a list of HTML tags:
+
+- `tagsToIgnore` - HTML tag names that hotkeys will not trigger on
+
 ```tsx
 import { useHotkeys } from '@mantine/hooks';
 

docs/src/docs/others/spotlight.mdx

@@ -90,7 +90,7 @@ with desired default browser behavior.
 Keyboard shortcuts will not work if:
 
 - focus is not on current page
-- `input`, `textarea` or `select` elements are focused
+- `input`, `textarea` or `select` elements are focused (these can be overriden with the `tagsToIgnore` arg)
 
 To disabled keyboard shortcuts set `shortcut={null}`:
 

src/mantine-hooks/src/use-hotkeys/use-hotkeys.ts

@@ -6,21 +6,21 @@ export { getHotkeyHandler };
 
 export type HotkeyItem = [string, (event: KeyboardEvent) => void, HotkeyItemOptions?];
 
-function shouldFireEvent(event: KeyboardEvent) {
+function shouldFireEvent(event: KeyboardEvent, tagsToIgnore: string[]) {
   if (event.target instanceof HTMLElement) {
-    return (
-      !event.target.isContentEditable &&
-      !['INPUT', 'TEXTAREA', 'SELECT'].includes(event.target.tagName)
-    );
+    return !event.target.isContentEditable && !tagsToIgnore.includes(event.target.tagName);
   }
   return true;
 }
 
-export function useHotkeys(hotkeys: HotkeyItem[]) {
+export function useHotkeys(
+  hotkeys: HotkeyItem[],
+  tagsToIgnore: string[] = ['INPUT', 'TEXTAREA', 'SELECT']
+) {
   useEffect(() => {
     const keydownListener = (event: KeyboardEvent) => {
       hotkeys.forEach(([hotkey, handler, options = { preventDefault: true }]) => {
-        if (getHotkeyMatcher(hotkey)(event) && shouldFireEvent(event)) {
+        if (getHotkeyMatcher(hotkey)(event) && shouldFireEvent(event, tagsToIgnore)) {
           if (options.preventDefault) {
             event.preventDefault();
           }

src/mantine-spotlight/src/SpotlightProvider.tsx

@@ -1,11 +1,11 @@
-import React, { useState, useRef } from 'react';
 import { useDidUpdate, useDisclosure } from '@mantine/hooks';
-import { useActionsState } from './use-actions-state/use-actions-state';
-import { useSpotlightShortcuts } from './use-spotlight-shortcuts/use-spotlight-shortcuts';
-import { Spotlight, InnerSpotlightProps } from './Spotlight/Spotlight';
+import React, { useRef, useState } from 'react';
 import { useSpotlightEvents } from './events';
-import type { SpotlightAction } from './types';
 import { SpotlightContext } from './Spotlight.context';
+import { InnerSpotlightProps, Spotlight } from './Spotlight/Spotlight';
+import type { SpotlightAction } from './types';
+import { useActionsState } from './use-actions-state/use-actions-state';
+import { useSpotlightShortcuts } from './use-spotlight-shortcuts/use-spotlight-shortcuts';
 
 export interface SpotlightProviderProps extends InnerSpotlightProps {
   /** Actions list */
@@ -31,6 +31,9 @@ export interface SpotlightProviderProps extends InnerSpotlightProps {
 
   /** Spotlight will not render if disabled is set to true */
   disabled?: boolean;
+
+  /** Tags to ignore shortcut hotkeys on. */
+  tagsToIgnore?: string[];
 }
 
 export function SpotlightProvider({
@@ -43,6 +46,7 @@ export function SpotlightProvider({
   cleanQueryOnClose = true,
   transitionDuration = 150,
   disabled = false,
+  tagsToIgnore = ['INPUT', 'TEXTAREA', 'SELECT'],
   ...others
 }: SpotlightProviderProps) {
   const timeoutRef = useRef<number>(-1);
@@ -86,7 +90,7 @@ export function SpotlightProvider({
     query,
   };
 
-  useSpotlightShortcuts(shortcut, open);
+  useSpotlightShortcuts(shortcut, open, tagsToIgnore);
   useSpotlightEvents({ open, close, toggle, registerActions, removeActions, triggerAction });
 
   return (

src/mantine-spotlight/src/use-spotlight-shortcuts/use-spotlight-shortcuts.ts

@@ -1,4 +1,4 @@
-import { useHotkeys, HotkeyItem } from '@mantine/hooks';
+import { HotkeyItem, useHotkeys } from '@mantine/hooks';
 
 export function getHotkeysPayload(
   shortcuts: string | string[],
@@ -15,6 +15,10 @@ export function getHotkeysPayload(
   return [[shortcuts, onToggle]];
 }
 
-export function useSpotlightShortcuts(shortcuts: string | string[], onToggle: () => void) {
-  useHotkeys(getHotkeysPayload(shortcuts, onToggle));
+export function useSpotlightShortcuts(
+  shortcuts: string | string[],
+  onToggle: () => void,
+  tagsToIgnore?: string[]
+) {
+  useHotkeys(getHotkeysPayload(shortcuts, onToggle), tagsToIgnore);
 }