Home  >  Q&A  >  body text

Method to clear selected value of ComboBox in HeadlessUI

I'm trying to clear the selected option every time the user opens the dropdown box.

Currently, when I select an option and open the dropdown again, the previously selected option remains selected.

I've changed the nullable property to true, but that didn't work.

The following is the code: https://codesandbox.io/s/clever-chaum-94xsng?file=/src/FilterDropdown.js

P粉464088437P粉464088437430 days ago466

reply all(1)I'll reply

  • P粉395056196

    P粉3950561962023-09-10 19:16:25

    You can try using the open attribute in the render function. It tells us whether the dropdown box is open. I made a very simple example.

    <Combobox value={selected} onChange={setSelected} nullable>
      {/* 我使用渲染函数中的open值将值设置为null。当它打开时,值会被清空。 */}
      {({ open }) => {
        setIsOpen(open);
        if (open) {
          setSelected(null);
        }

    Here is the complete code. Give it a try.

    reply
    0
  • Cancelreply