diff --git a/packages/ui/components/ChipInput.tsx b/packages/ui/components/ChipInput.tsx index 420e21afa..e208e3381 100644 --- a/packages/ui/components/ChipInput.tsx +++ b/packages/ui/components/ChipInput.tsx @@ -22,21 +22,17 @@ export const ChipInput: FunctionComponent = ({ defaultValue = '' }) => { const inputRef = useRef(null); + const firstChipRef = useRef(null); const handleKeyDown = (event: KeyboardEvent) => { if (event.key === 'Enter' && event.currentTarget.value.trim()) { onChange([...chips, event.currentTarget.value.trim()]); event.currentTarget.value = ''; } else if (event.key === 'Backspace' && !event.currentTarget.value) { - // Handle delete if input is empty onChange(chips.slice(0, -1)); - } else if (event.key === 'Tab') { - // Focus on the next chip + } else if (event.key === 'Tab' && !event.shiftKey) { event.preventDefault(); - if (inputRef.current) { - const nextChip = inputRef.current.previousSibling as HTMLElement; - nextChip?.focus(); - } + firstChipRef.current?.focus(); } }; @@ -45,8 +41,6 @@ export const ChipInput: FunctionComponent = ({ const updatedChips = [...chips]; updatedChips.splice(index, 1); onChange(updatedChips); - } else if (event.key === 'Tab' && index === chips.length - 1) { - inputRef.current?.focus(); } }; @@ -63,9 +57,10 @@ export const ChipInput: FunctionComponent = ({ className="m-1 bg-gray-800 text-white rounded px-2 py-1 flex items-center" tabIndex={0} onKeyDown={handleChipKeyDown(index)} + ref={index === 0 ? firstChipRef : undefined} > {chip} - + ))}