MultiSelect acts as uncontrolled if passing in an empty string for query prop

[evansjohnson]

Environment

• Package version(s): @blueprintjs/[email protected]
• Operating System: n/a
• Browser name and version: n/a

Code Sandbox

https://codesandbox.io/p/devbox/great-dan-qmd7ql?file=%2Fsrc%2FCoreExample.tsx%3A2%2C30&workspaceId=5e6d7c89-89f8-459c-baa9-d2bd96e632db

Steps to reproduce

Try typing in Input and TagInput, notice how only strings with "a" are allowed, per the code.

Try typing in MultiSelect, notice how even though the state handling code is the same, the component acts as if it is uncontrolled.

Actual behavior

Passing in an empty string to query should be respected, like it is for Input and TagInput when used directly.

Expected behavior

Not able to ignore some query updates and continue to pass in "", the MultiSelect acts as if it is uncontrolled.

Possible solution

Should be careful about users accidentally relying on this behavior. But seems likely to be an issue not properly treating "" different from a nullish value.

---

A little more color on the actual use case:

We want to implement custom behavior onPaste (in this case catching the event which bubbles from a wrapping element) and parse the pasted data ourselves and clear the query. Without this behavior we need to do a hack like

this.setState({ query}, () => {
  this.setState({ query: ""});
})

instead of just this.setState({ query: "" }). (yes this use case is still using class components, luckily the setState callback actually works well for us as a workaround for now).

We're not using the onItemsPaste from the MultiSelect directly because we want to create new items from the pasted string. It looks like the underlying TagInput handles that better but I didn't see a way to do this easily in the MultiSelect. Possibly we should just be consuming the TagInput directly...

In any case, this behavior seems like a bug and is inconsistent with the underlying input components so I wanted to get this filed for tracking and to see if it comes up again for others.