[combobox] Question regarding the implementation of an asynchronous combobox

[with-key]

Hello
I sincerely thank you, baseui.

I am implementing an asynchronous combobox based on the “auto complete” reference. I have two questions.

1. Why does the input value become an empty string when the popup closes? It changes to an empty string, causing the value to be lost.

2. When using the "controlled components", the value does not allow undefined. Should I use null instead

👇 I'm attaching the code.
https://codesandbox.io/p/sandbox/nifty-sun-jyrddp

[mj12albert]

I am implementing an asynchronous combobox based on the “auto complete” reference

Any particular reason you are using combobox instead of autocomplete? This example seems very close to your sandbox: https://base-ui.com/react/components/autocomplete#async-search

When using the "controlled components", the value does not allow undefined. Should I use null instead

Yes ~ you should use null and not undefined, for a detailed explanation see: https://react.dev/reference/react-dom/components/input#im-getting-an-error-a-component-is-changing-an-uncontrolled-input-to-be-controlled

@with-key

[kiastorm]

I am also having the same issue with implementing async ComboBox.

I'm implementing essentially a Creatable the same as in the example but single-select instead of multi.

https://base-ui.com/react/components/combobox#creatable

No matter what I do, the input value always goes back to being empty, although when I expand the popup I see it's selected

[atomiks]

I created some async combobox examples here which might help: #2947

One thing to watch for is the selected values need to remain in the items array while searching, otherwise the selections get removed

[kiastorm]

@atomiks Thank you for your quick and useful response :)

Will take a look and give these a try

[with-key]

goood! thank you!!