diff --git a/src/components/TagInput.tsx b/src/components/TagInput.tsx index c84002b6..ce0b4201 100644 --- a/src/components/TagInput.tsx +++ b/src/components/TagInput.tsx @@ -61,11 +61,13 @@ export default function TagInput({ .join(',')); } setSelectedOptionIndex(undefined); + inputRef.current?.focus(); }, [onChange, selectedOptions]); const removeOption = useCallback((option: string) => { onChange?.(selectedOptions.filter(o => o !== option).join(',')); setSelectedOptionIndex(undefined); + inputRef.current?.focus(); }, [onChange, selectedOptions]); // Reset selected option index when focus is lost @@ -75,10 +77,12 @@ export default function TagInput({ // Focus option in the DOM when selected index changes useEffect(() => { + const options = optionsRef.current?.querySelectorAll('div'); if (selectedOptionIndex !== undefined) { - const options = optionsRef.current?.querySelectorAll('div'); const option = options?.[selectedOptionIndex] as HTMLElement | undefined; option?.focus(); + } else { + inputRef.current?.focus(); } }, [selectedOptionIndex]); @@ -104,7 +108,6 @@ export default function TagInput({ e.preventDefault(); } addOption(optionsFiltered[selectedOptionIndex ?? 0]); - inputRef.current?.focus(); setInputText(''); break; case ',': @@ -138,6 +141,7 @@ export default function TagInput({ } break; case 'Escape': + inputRef.current?.blur(); setHasFocus(false); break; } @@ -233,7 +237,6 @@ export default function TagInput({ )} onClick={() => { addOption(option); - inputRef.current?.focus(); setInputText(''); }} > diff --git a/tailwind.config.js b/tailwind.config.js index f701b311..61b59613 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -37,6 +37,9 @@ module.exports = { }, }, }, + future: { + hoverOnlyWhenSupported: true, + }, plugins: [ require('@tailwindcss/forms'), ],