Fix input tag auto-focus behavior

This commit is contained in:
Sam Becker 2024-02-04 18:38:39 -06:00
parent 499cf6b4e5
commit b45355c951

View File

@ -77,12 +77,10 @@ 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]);
@ -216,7 +214,7 @@ export default function TagInput({
className={clsx(
!(hasFocus && optionsFiltered.length > 0) && 'hidden',
'control absolute top-0 mt-4 w-full z-10 !px-1.5 !py-1.5',
'max-h-[7.5rem] overflow-y-auto',
'max-h-[8rem] overflow-y-auto',
'flex flex-col gap-y-1',
'text-xl shadow-lg dark:shadow-xl',
)}