diff --git a/packages/pl-fe/src/components/ui/multiselect.tsx b/packages/pl-fe/src/components/ui/multiselect.tsx index 13f34d034..3f4fae048 100644 --- a/packages/pl-fe/src/components/ui/multiselect.tsx +++ b/packages/pl-fe/src/components/ui/multiselect.tsx @@ -195,8 +195,21 @@ const Multiselect: React.FC = ({ break; case 'Escape': setIsOpen(false); + searchBoxRef.current?.focus(); break; default: + if (document.activeElement !== searchBoxRef.current) { + if ( + e.key === 'Backspace' || + e.key === 'ArrowLeft' || + e.key === 'ArrowRight' || + (e.key.length === 1 && !e.ctrlKey && !e.metaKey) + ) { + searchBoxRef.current?.focus(); + } + } else if (!isOpen) { + setIsOpen(true); + } } }, [inputValue, selectedValues, visibleOptions, isOpen, onSelectItem, onRemoveSelectedItem], diff --git a/packages/pl-fe/src/features/ui/components/hotkeys.tsx b/packages/pl-fe/src/features/ui/components/hotkeys.tsx index 0dbe1eb96..369f3ddb5 100644 --- a/packages/pl-fe/src/features/ui/components/hotkeys.tsx +++ b/packages/pl-fe/src/features/ui/components/hotkeys.tsx @@ -193,7 +193,7 @@ function useHotkeys(handlers: HandlerMap) { isKeyboardEvent(event) && !event.defaultPrevented && !['input', 'textarea', 'select', 'em-emoji-picker'].includes(tagName) && - !(event.target as HTMLElement).closest('[contenteditable]') && + !(event.target as HTMLElement).closest('[contenteditable], .multiselect-container') && !(['a', 'button'].includes(tagName) && normalizeKey(event.key) === 'enter'); if (shouldHandleEvent) {