How to Focus an Input Field with a Hotkey in React

Senior Web Developer with experience using React, TypeScript, and Python.

I hope to provide you with the inspiration and knowledge to help you with your web development journey.

Implementation

const SearchInput: FC = () => { const inputRef = useRef<HTMLInputElement>(null); const [actionKey, setActionKey] = useState<string>(''); useEffect(() => { // check if navigator is defined to prevent unexpected errors if browser does not support if (typeof navigator !== 'undefined') { if (/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)) { setActionKey('⌘K'); } else { setActionKey('CtrlK'); } } const handleKeyPress = (event: KeyboardEvent) => { let hotkey = false; if (typeof navigator !== 'undefined') { if (/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)) { hotkey = event.metaKey && event.key === 'k'; } else { hotkey = event.ctrlKey && event.key === 'k'; } } if (hotkey && inputRef.current) { inputRef.current.focus(); } }; // Add event listener when the component mounts document.addEventListener('keydown', handleKeyPress); // Clean up the event listener when the component unmounts return () => { document.removeEventListener('keydown', handleKeyPress); }; }, []); return ( <div className="relative"> <input ref={inputRef} type="text" className="peer block w-full border-0 px-0 py-3 text-xl focus:ring-0 sm:leading-6" /> {actionKey && ( <div className="absolute inset-y-0 right-0 flex py-3 pr-1.5"> <kbd className="inline-flex items-center rounded border border-zinc-300 px-1 font-sans text-xs text-zinc-400"> {actionKey} </kbd> </div> )} </div> ); };

We use the useRef hook to create a reference to the input element.

We use the useEffect hook to add an event listener for the specified hotkey.

navigator.platform is used to determine if the user is using a mac or windows machine so we know what hotkey to display and listen to.

calling inputRef.current.focus() will focus the input if the hotkey is pressed

<kbd /> html element is used to denote textual user input from a keyboard MDN

navigator.platform is technically deprecated and you could use navigator.userAgent as an alternative.

How to Focus an Input Field with a Hotkey in React

Comments

More from this blog

Why Neovim is My Text Editor of Choice

What is a Design System and Why Is It Important for Software Engineering?

Real-time Page Views with Next.js and Supabase

Create a Dynamic Sitemap with Next.js

Implementation

Command Palette

Comments

More from this blog

Implementation