Whats the recommended way of handling onClick event on Combobox for new value?

[bouteillerAlan]

Hey, I want to allow my user to execute the function createNewOption() when it clicks on the new value set on my combobox (exactly like in the documentation), but the onClick event does absolutely nothing. What is the way to handle that?

const ChooseEditor = ({ editor_id, onChange, bgColor = "bg-white", readOnly = false }: ChooseEditorProps) => {
  const [query, setQuery] = useState<string>("");
  const [selectedEditor, setSelectedEditor] = useState<string>("");
  const [filteredEditors, setFilteredEditors] = useState<Editor[] | []>([]);

  const productEditors = useSelector(api.endpoints.fetchAllEditors.select()).data?.resources;
  const [createEditor] = useCreateEditorMutation();

  useEffect(() => {
    if (productEditors && query) {
      const filterEditorByQuery: Editor[] = productEditors.filter((editor: Editor): boolean => editor.name.toLowerCase().startsWith(query.toLowerCase()));
      console.log(filterEditorByQuery);
      setFilteredEditors(filterEditorByQuery);
    } else {
      setFilteredEditors([]);
    }
  }, [productEditors, query]);

  /**
   * call the create editor mutation
   * @return void
   */
  function createNewEditor(): void {
    createEditor({ name: formatText(query) })
      .unwrap()
      .then((data) => onChange(data.resource.id))
      .catch(() => onChange(""));
  }

  return (
    <Combobox value={selectedEditor} onChange={(value) => setSelectedEditor(value ?? "")} onClose={() => setQuery("")}>
      <ComboboxInput
        aria-label="Assignee"
        displayValue={(editor: Editor) => editor?.name}
        onChange={(event) => setQuery(event.target.value)}
      />
      <ComboboxOptions anchor="bottom" className="border empty:invisible">

        {query && (
          <ComboboxOption value={{ id: null, name: query }} className="data-focus:bg-blue-100" onClick={() => createNewEditor()}>
            {`Creer ${query}`}
          </ComboboxOption>
        )}

        {filteredEditors.map((editor: Editor) => (
          <ComboboxOption key={editor.id} value={editor} className="data-focus:bg-blue-100">
            {editor.name}
          </ComboboxOption>
        ))}

      </ComboboxOptions>
    </Combobox>
  );
};