Use new immediate feature of headlessui v2

loculus-project · Jun 29, 2024 · c522fe4 · c522fe4
1 parent 1efe57a
commit c522fe4
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 8 deletions.
diff --git a/website/src/components/SearchPage/DownloadDialog/ActiveDownloadFilters.tsx b/website/src/components/SearchPage/DownloadDialog/ActiveDownloadFilters.tsx
@@ -11,10 +11,9 @@ export const ActiveDownloadFilters: FC<ActiveDownloadFiltersProps> = ({ lapisSea
     let filterValues = Object.entries(lapisSearchParameters)
         .filter((vals) => vals[1] !== undefined && vals[1] !== '')
         .filter(([name, val]) => !(Object.keys(hiddenFieldValues).includes(name) && hiddenFieldValues[name] === val))
-        .map(([name, filterValue]) => ({ name, filterValue }));
+        .map(([name, filterValue]) => ({ name, filterValue: filterValue !== null ? filterValue : '' }));
 
     filterValues = filterValues.filter(({ filterValue }) => filterValue.length > 0);
-
     if (filterValues.length === 0) {
         return null;
     }

diff --git a/website/src/components/SearchPage/fields/AutoCompleteField.spec.tsx b/website/src/components/SearchPage/fields/AutoCompleteField.spec.tsx
@@ -35,7 +35,7 @@ describe('AutoCompleteField', () => {
         setAFieldValue.mockClear();
     });
 
-    it('renders input and shows all all options on empty input', async () => {
+    it('renders input and shows all options on empty input', async () => {
         mockUseAggregated.mockReturnValue({
             data: {
                 data: [

diff --git a/website/src/components/SearchPage/fields/AutoCompleteField.tsx b/website/src/components/SearchPage/fields/AutoCompleteField.tsx
@@ -62,9 +62,6 @@ export const AutoCompleteField = ({
         });
 
         mutate({ fields: [field.name], ...otherFields });
-        if (buttonRef.current) {
-            buttonRef.current.click();
-        }
     };
 
     const options = useMemo(
@@ -85,7 +82,7 @@ export const AutoCompleteField = ({
     );
 
     return (
-        <Combobox value={fieldValue} onChange={(value) => setAFieldValue(field.name, value)}>
+        <Combobox immediate value={fieldValue} onChange={(value) => setAFieldValue(field.name, value)}>
             <div className='relative'>
                 <ComboboxInput
                     className='w-full py-2 pl-3  text-sm leading-5
@@ -98,7 +95,7 @@ export const AutoCompleteField = ({
                     placeholder={field.label}
                     as={CustomInput}
                 />
-                {((fieldValue !== '' && fieldValue !== undefined) || query !== '') && (
+                {((fieldValue !== '' && fieldValue !== undefined && fieldValue !== null) || query !== '') && (
                     <button
                         className='absolute inset-y-0 right-8 flex items-center pr-2 h-5 top-4 bg-white rounded-sm'
                         onClick={() => {