async combobox items

[nmathew98]

hey there,

was wondering how I should approach implementing a combobox with async items? its an address field with options fetched as the user types

at the moment the options do show but it is not automatic once the options have loaded and I can't find a way to imperatively trigger it to show. setting the open prop if there are items just shows blank combobox content

if once typed I were to click on the combobox then it works, its just not showing automatically once the options are loaded (I have tried setting triggerMode to input explicitly also)

trying to perform a .click on the trigger button does nothing also

[shayanhabibi]

Hey @nmathew98, would you be able to upload some reproducible code for this?

There are a few things to ensure here: reactivity of the items for the listbox is correct; virtualisation is false OR virtualisation is true and the implementation of the listbox is correct.

Sounds like an example case that can be included in with docs. I believe the Select component has more expressive documentation to use cases including virtualisation as opposed to the similarly derivative Combobox

[nmathew98]

hey there! thanks for taking a look! yep I'll try to do that over the weekend

also just another feature request which maybe I should open another issue for: it would be useful for the combobox to allow custom values, ark ui does it and its valuable for building address autocompletes. sometimes addresses don't match and I think we would need to have another text field so that we can make custom values work

while I get the reproduction ready, at the time I opened the issue this was my implementation:

• JSX: https://github.com/skulpturenz/imigresen/blob/758d657d354f8e723aad56abc97f0a240772ce71/client/src/feat/my-passport-form/steps/address-details/index.tsx#L38
• Get autofill options: https://github.com/skulpturenz/imigresen/blob/758d657d354f8e723aad56abc97f0a240772ce71/client/src/feat/my-passport-form/hooks/useAddressAutofill.ts#L48

[shayanhabibi]

also just another feature request which maybe I should open another issue for: it would be useful for the combobox to allow custom values

Does object options not work for this?

Or do you mean having multiple fields combined into a combobox?

I think the latter is possible already with some hackery using object options and multiple text fields, something I'll give a shot at some point

Update: Actually, I think I know what the issue would be after looking at #636 , it is probably the caching mechanism. It should still be reactive, but the smell is similar. I believe there was manual dependency handling in the memos for optimisation, so they might be overlooking changes while the disclosure is open.

If you close the disclosure (the popover), are the options correctly reloaded?

I'm pretty sure virtualisation skips a lot of those caching memos, so that would be the route to go.

Update2: The Search component seems to be designed for this, but I think similar issues were in #636 so not sure if that'll help.

[nmathew98]

also just another feature request which maybe I should open another issue for: it would be useful for the combobox to allow custom values

Does object options not work for this?

Or do you mean having multiple fields combined into a combobox?

I think the latter is possible already with some hackery using object options and multiple text fields, something I'll give a shot at some point

Update: Actually, I think I know what the issue would be after looking at #636 , it is probably the caching mechanism. It should still be reactive, but the smell is similar. I believe there was manual dependency handling in the memos for optimisation, so they might be overlooking changes while the disclosure is open.

If you close the disclosure (the popover), are the options correctly reloaded?

I'm pretty sure virtualisation skips a lot of those caching memos, so that would be the route to go.

Update2: The Search component seems to be designed for this, but I think similar issues were in #636 so not sure if that'll help.

hey, sorry for taking so long, just been a little busy outside of the work. ill try to get to this soon.

iirc reopening the disclosure did the trick but for an address autocomplete it isn't a suitable workaround I think because if there are no available suggestions then the options list does not show so there is no visual feedback that an options list is even available

also, I did consider the search component but I didn't see too much of a difference functionality wise compared to combobox and I went with keeping things mostly in line with what shadcn has