From 22730d09466efbff0ee3af40563c325eac9aa28b Mon Sep 17 00:00:00 2001 From: colinricardo Date: Wed, 23 Nov 2022 22:20:37 +0100 Subject: [PATCH 1/2] [@mantine/hooks] use-hotkeys: Add ability to specify tags to ignore --- src/mantine-hooks/src/use-hotkeys/use-hotkeys.ts | 16 ++++++++-------- src/mantine-spotlight/src/SpotlightProvider.tsx | 16 ++++++++++------ .../use-spotlight-shortcuts.ts | 10 +++++++--- 3 files changed, 25 insertions(+), 17 deletions(-) diff --git a/src/mantine-hooks/src/use-hotkeys/use-hotkeys.ts b/src/mantine-hooks/src/use-hotkeys/use-hotkeys.ts index 3d32dc29d75..eced3e97fe4 100644 --- a/src/mantine-hooks/src/use-hotkeys/use-hotkeys.ts +++ b/src/mantine-hooks/src/use-hotkeys/use-hotkeys.ts @@ -1,25 +1,25 @@ import { useEffect } from 'react'; -import { getHotkeyMatcher, getHotkeyHandler } from './parse-hotkey'; +import { getHotkeyHandler, getHotkeyMatcher } from './parse-hotkey'; export { getHotkeyHandler }; export type HotkeyItem = [string, (event: KeyboardEvent) => void]; -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]) => { - if (getHotkeyMatcher(hotkey)(event) && shouldFireEvent(event)) { + if (getHotkeyMatcher(hotkey)(event) && shouldFireEvent(event, tagsToIgnore)) { event.preventDefault(); handler(event); } diff --git a/src/mantine-spotlight/src/SpotlightProvider.tsx b/src/mantine-spotlight/src/SpotlightProvider.tsx index 4a0022e7f32..d34bcef6514 100644 --- a/src/mantine-spotlight/src/SpotlightProvider.tsx +++ b/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(-1); @@ -86,7 +90,7 @@ export function SpotlightProvider({ query, }; - useSpotlightShortcuts(shortcut, open); + useSpotlightShortcuts(shortcut, open, tagsToIgnore); useSpotlightEvents({ open, close, toggle, registerActions, removeActions, triggerAction }); return ( diff --git a/src/mantine-spotlight/src/use-spotlight-shortcuts/use-spotlight-shortcuts.ts b/src/mantine-spotlight/src/use-spotlight-shortcuts/use-spotlight-shortcuts.ts index 932a09eb958..425b8e80dbc 100644 --- a/src/mantine-spotlight/src/use-spotlight-shortcuts/use-spotlight-shortcuts.ts +++ b/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); } From cf530001e3f41546ce8bdbd7c3d2d0679ab202d2 Mon Sep 17 00:00:00 2001 From: colinricardo Date: Wed, 23 Nov 2022 22:32:57 +0100 Subject: [PATCH 2/2] [@mantine/hooks] use-hotkeys: update docs --- docs/src/docs/hooks/use-hotkeys.mdx | 6 +++++- docs/src/docs/others/spotlight.mdx | 2 +- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/docs/src/docs/hooks/use-hotkeys.mdx b/docs/src/docs/hooks/use-hotkeys.mdx index 61d378a8e3f..b093003dda3 100644 --- a/docs/src/docs/hooks/use-hotkeys.mdx +++ b/docs/src/docs/hooks/use-hotkeys.mdx @@ -15,11 +15,15 @@ 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 +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'; diff --git a/docs/src/docs/others/spotlight.mdx b/docs/src/docs/others/spotlight.mdx index 3995b775e5a..270e8b6b886 100644 --- a/docs/src/docs/others/spotlight.mdx +++ b/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}`: