diff --git a/app/components/Combobox.tsx b/app/components/Combobox.tsx index 692526b55..b1700a267 100644 --- a/app/components/Combobox.tsx +++ b/app/components/Combobox.tsx @@ -33,15 +33,16 @@ interface ComboboxProps { isLoading?: boolean; required?: boolean; initialValue?: ComboboxOption; + clearsInputOnFocus?: boolean; onChange?: (selectedOption?: ComboboxOption) => void; } -// xxx: should clear on click export function Combobox>({ options, inputName, placeholder, initialValue, + clearsInputOnFocus = false, onChange, required, className, @@ -50,10 +51,13 @@ export function Combobox>({ }: ComboboxProps) { const [selectedOption, setSelectedOption] = React.useState>(); + const [lastSelectedOption, setLastSelectedOption] = + React.useState>(); const [query, setQuery] = React.useState(""); React.useEffect(() => { setSelectedOption(initialValue); + setLastSelectedOption(initialValue); }, [initialValue]); const filteredOptions = (() => { @@ -76,11 +80,22 @@ export function Combobox>({ onChange={(selected) => { onChange?.(selected); setSelectedOption(selected); + setLastSelectedOption(selected); }} name={inputName} disabled={isLoading} > { + if (clearsInputOnFocus) { + setSelectedOption(undefined); + } + }} + onBlur={() => { + if (!selectedOption && clearsInputOnFocus) { + setSelectedOption(lastSelectedOption); + } + }} onChange={(event) => setQuery(event.target.value)} placeholder={isLoading ? "Loading..." : placeholder} className={clsx("combobox-input", className)} @@ -193,9 +208,15 @@ export function WeaponCombobox({ inputName, onChange, initialWeaponId, + clearsInputOnFocus, }: Pick< ComboboxProps, - "inputName" | "onChange" | "className" | "id" | "required" + | "inputName" + | "onChange" + | "className" + | "id" + | "required" + | "clearsInputOnFocus" > & { initialWeaponId?: typeof mainWeaponIds[number] }) { const { t } = useTranslation("weapons"); @@ -219,6 +240,7 @@ export function WeaponCombobox({ className={className} id={id} required={required} + clearsInputOnFocus={clearsInputOnFocus} /> ); } diff --git a/app/routes/analyzer.tsx b/app/routes/analyzer.tsx index 6da52efb7..8f82175e2 100644 --- a/app/routes/analyzer.tsx +++ b/app/routes/analyzer.tsx @@ -43,6 +43,7 @@ export default function BuildAnalyzerPage() { opt && setMainWeaponId(Number(opt.value) as MainWeaponId) } className="w-full-important" + clearsInputOnFocus />