chore(website): use focus instead of deprecated active, headlessui v2…

… migration see https://github.com/tailwindlabs/headlessui/releases/tag/%40headlessui%2Freact%40v2.0.0#user-content-upgrading-from-v1
loculus-project · Jun 29, 2024 · 7e632f8 · 7e632f8
1 parent aec6a39
commit 7e632f8
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git 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) => (
                             <ComboboxOption
                                 key={option.option}
-                                className={({ active }) =>
+                                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 }) => (
                                     <>
                                         <span className={`inline-block ${selected ? 'font-medium' : 'font-normal'}`}>
                                             {option.option}
@@ -154,7 +154,7 @@ export const AutoCompleteField = ({
                                         {selected && (
                                             <span
                                                 className={`absolute inset-y-0 left-0 flex items-center pl-3 ${
-                                                    active ? 'text-white' : 'text-blue-500'
+                                                    focus ? 'text-white' : 'text-blue-500'
                                                 }`}
                                             >
                                                 <svg className='w-5 h-5' fill='currentColor' viewBox='0 0 20 20'>

diff --git a/website/src/components/SearchPage/fields/MutationField.tsx b/website/src/components/SearchPage/fields/MutationField.tsx
@@ -251,8 +251,8 @@ export const MutationField: FC<MutationFieldProps> = ({ referenceGenomesSequence
                                 <ComboboxOption
                                     key={index}
                                     value={option}
-                                    className={({ active }) =>
-                                        `${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 }) => (