How to reset query on MultiSelect2 from blueprintjs after creating a new item?

Question

Here's a little snippet of my <MultiSelect2 /> component.

const addNewOption = (type: string) => {
    return type;
  };

const handleAddNewType = (type: string) => {
    setData([
      ...data,
     {
        name: type,
        isSelected: true,
     }
    ]);
  }

<MultiSelect2
        resetOnQuery={true}
        resetOnSelect={true}
        createNewItemFromQuery={addNewOption}
        createNewItemRenderer={(val) => {
          return (
            <MenuItem2
              key={val}
              text={val}
              icon="add"
              roleStructure="listoption"
              onClick={() => handleAddNewType(val)}
            />
          );
        }}
        selectedItems={data
          .filter((item) => item.isSelected)
          .map((item) => item.name)}
      />
    </div>

What I want is after adding a new data or in this case type, the query that I entered should get reset. I'm not sure how though. I've enabled resetOnQuery and also resetOnSelect but after adding the new type, the query doesn't reset.

So if I type NEW_DATA, the new <MenuItem2 /> will get rendered at the bottom of the list with text of NEW_DATA, and if I click on it, it will get added to my data state, and it will also appear as selectedItems because it has isSelected: true, but the query (NEW_DATA the one I typed) doesn't disappear.

Answer 1

You have to control the query prop:

// control selected items
const [values, setValues] = useState([]);
// control the query (ie the input text)
const [query, setQuery] = useState("");
const onItemSelect = useCallback(
   (item) => {
        setValues(values.concat([item]));
        setQuery(""); // clear the input
}, [values, setValues, setQuery]);

...
return <MultiSelect2
    query={query}
    items={values}
    onItemSelect={onItemSelect}
    ...
    />