Method to clear selected value of ComboBox in HeadlessUI

Question

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

Answer 1

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.