diff --git a/website/src/components/SearchPage/fields/AutoCompleteField.tsx b/website/src/components/SearchPage/fields/AutoCompleteField.tsx index 99bb297a5e..dea4b692aa 100644 --- a/website/src/components/SearchPage/fields/AutoCompleteField.tsx +++ b/website/src/components/SearchPage/fields/AutoCompleteField.tsx @@ -138,14 +138,14 @@ export const AutoCompleteField = ({ filteredOptions.map((option) => ( + className={({ focus }) => `relative cursor-default select-none py-2 pl-10 pr-4 ${ - active ? 'bg-blue-500 text-white' : 'text-gray-900' + focus ? 'bg-blue-500 text-white' : 'text-gray-900' }` } value={option.option} > - {({ selected, active }) => ( + {({ selected, focus }) => ( <> {option.option} @@ -154,7 +154,7 @@ export const AutoCompleteField = ({ {selected && ( diff --git a/website/src/components/SearchPage/fields/MutationField.tsx b/website/src/components/SearchPage/fields/MutationField.tsx index 536b8bea7e..bccffc3a34 100644 --- a/website/src/components/SearchPage/fields/MutationField.tsx +++ b/website/src/components/SearchPage/fields/MutationField.tsx @@ -251,8 +251,8 @@ export const MutationField: FC = ({ referenceGenomesSequence - `${active ? 'text-white bg-blue-600' : 'text-gray-900'} cursor-default select-none relative py-2 pl-10 pr-4` + className={({ focus }) => + `${focus ? 'text-white bg-blue-600' : 'text-gray-900'} cursor-default select-none relative py-2 pl-10 pr-4` } > {({ selected }) => (