Méthode pour effacer la valeur sélectionnée de ComboBox dans HeadlessUI

Question

J'essaie d'effacer l'option sélectionnée chaque fois que l'utilisateur ouvre la liste déroulante.

Actuellement, lorsque je sélectionne une option et que j'ouvre à nouveau la liste déroulante, l'option précédemment sélectionnée reste sélectionnée.

J'ai changé l'attribut nullable en true mais cela n'a pas fonctionné.

Voici le code : https://codesandbox.io/s/clever-chaum-94xsng?file=/src/FilterDropdown.js

Answer 1

Vous pouvez essayer d'utiliser l'attribut open dans la fonction de rendu. Il nous indique si la liste déroulante est ouverte. J'ai fait un exemple très simple.

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

Voici le code complet. Essaie.