Cannot input filter in isMulti Select #4943
-
I'm using react-select with custom ValueContainer, Option to only display selected item count. The input is fine until the first time I select an item. If I want to use the filter, I have to select/unselect/click on input again. import Select, { components } from "react-select"; const Option = (props) => { <components.Option {...props}> <input type="checkbox" checked={props.isSelected} onChange={() => null} />{" "} {props.label} </components.Option> ); }; const ValueContainer = ({ children, getValue, hasValue, ...props }) => {
export default () => ( |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 2 replies
-
Hello @tranhoangnhi95, the problem that causes this issue is you are rendering two different This can be fixed by rearranging your component to render only one return <ValueContainer>
{hasValue & myValueChild}
{otherChildren}
</ValueContainer>; |
Beta Was this translation helpful? Give feedback.
-
Hello @Rall3n , |
Beta Was this translation helpful? Give feedback.
Hello @tranhoangnhi95,
the problem that causes this issue is you are rendering two different
ValueContainer
components based on state. Rendering a different container leads to the focused input being unfocused due to it being a completely different input.This can be fixed by rearranging your component to render only one
ValueContainer
: