You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Import the Select component from @blueprintjs/select and render
Pass the query prop to a Select component
Click the rendered Select component and update the text input
Actual behavior
Text input is updated.
Expected behavior
As mentioned in the documentation of Select component, the expected behavior is that the text input is not changed and controlled via query prop.
inputProps
Props to spread to the query InputGroup. Use query and onQueryChange instead of inputProps.value and inputProps.onChange to control this input.
Possible solution
Updating line 134 in select.tsx from:
value={listProps.query}
to this:
value={this.props.query || listProps.query}
solves the problem. It seems like the query prop is never directly passed to the input group. QueryList component is the one who controls the query of InputGroup in Select component. It initializes its internal query state with the query prop, but from that point onward, it doesn't respect the query prop of Select component and send its internal state to InputGroup.
The text was updated successfully, but these errors were encountered:
What exactly is the problem in your code sandbox? It seems like the query prop control is working as intended.
I briefly traced through the rendering stack of Select / QueryList and it looks like listProps.query is being set to QueryList's state.query (which is kept up to date via QueryList's componentDidUpdate) here:
Environment
Code Sandbox
https://codesandbox.io/s/select-component-doesnt-respect-query-prop-dlih7
Steps to reproduce
Actual behavior
Text input is updated.
Expected behavior
As mentioned in the documentation of Select component, the expected behavior is that the text input is not changed and controlled via query prop.
Possible solution
Updating line 134 in
select.tsx
from:to this:
solves the problem. It seems like the query prop is never directly passed to the input group. QueryList component is the one who controls the query of InputGroup in Select component. It initializes its internal query state with the query prop, but from that point onward, it doesn't respect the query prop of Select component and send its internal state to InputGroup.
The text was updated successfully, but these errors were encountered: