refactor: use utrecht listbox for all combobox styling

delta10 · Dec 23, 2024 · 7a8db61 · 7a8db61
1 parent be851d5
commit 7a8db61
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 26 deletions.
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -29,6 +29,8 @@ export {
   Icon,
   RadioButton,
   LinkButton,
+  Listbox,
+  ListboxOption,
   AlertDialog,
   Article,
   PreserveData,

diff --git a/src/components/ui/AddressCombobox.tsx b/src/components/ui/AddressCombobox.tsx
@@ -4,10 +4,20 @@ import {
   ComboboxOption,
   ComboboxOptions,
 } from '@headlessui/react'
-import React, { Dispatch, SetStateAction, useEffect, useState } from 'react'
+import React, {
+  Dispatch,
+  Fragment,
+  SetStateAction,
+  useEffect,
+  useState,
+} from 'react'
 import { useConfig } from '@/hooks/useConfig'
 import { getSuggestedAddresses } from '@/services/location/address'
-import { StatusText } from '@/components/index'
+import {
+  Listbox,
+  ListboxOption,
+  StatusText,
+} from '@/components/index'
 // Import the Select Combobox component for the side-effects of injecting CSS
 // for related components, such as Textbox and Listbox.
 import '@utrecht/select-combobox-react/dist/css'
@@ -72,7 +82,7 @@ export const AddressCombobox = ({
     }
 
     getAddressOptions()
-  }, [query])
+  }, [config, query])
 
   const onChangeAddress = (selectedAddress: Address) => {
     if (!selectedAddress) {
@@ -124,30 +134,22 @@ export const AddressCombobox = ({
         autoComplete={'off'}
       />
       {!loading && (
-        <ComboboxOptions
-          anchor="bottom"
-          className="address-listbox utrecht-listbox utrecht-listbox--html-div fixed z-[9999] pointer-events-auto"
-        >
-          <div className={'utrecht-listbox__list'}>
-            {addressOptions.length > 0 ? (
-              addressOptions.map((address) => (
-                <ComboboxOption
-                  key={address.id}
-                  value={address}
-                  className="utrecht-listbox__option data-[focus]:bg-blue-100 !px-3 !py-1"
-                >
-                  {address.weergave_naam}
-                </ComboboxOption>
-              ))
-            ) : (
-              <ComboboxOption
-                value=""
-                className="!px-3 !py-1 utrecht-listbox--disabled"
-              >
-                <StatusText>{t('no_results')}</StatusText>
+        <ComboboxOptions as={Listbox} anchor="bottom">
+          {addressOptions.length > 0 ? (
+            addressOptions.map((address) => (
+              <ComboboxOption key={address.id} value={address} as={Fragment}>
+                {({ focus }) => (
+                  <ListboxOption active={focus}>
+                    {address.weergave_naam}
+                  </ListboxOption>
+                )}
               </ComboboxOption>
-            )}
-          </div>
+            ))
+          ) : (
+            <ComboboxOption value="" as={ListboxOption} disabled>
+              <StatusText>{t('no_results')}</StatusText>
+            </ComboboxOption>
+          )}
         </ComboboxOptions>
       )}
     </Combobox>