Cannot input filter in isMulti Select

[tranhoangnhi95]

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 React from "react";

import Select, { components } from "react-select";
import { colourOptions } from "./docs/data";

const Option = (props) => {
return (

<components.Option {...props}>
<input
type="checkbox"
checked={props.isSelected}
onChange={() => null}
/>{" "}
{props.label}
</components.Option>

);
};

const ValueContainer = ({ children, getValue, hasValue, ...props }) => {
const length = getValue().length;

  if(!hasValue){
    return(
      <components.ValueContainer {...props}>
        {children}
      </components.ValueContainer>
    );
  }

  return (
    <components.ValueContainer {...props}>
      {!props.selectProps.inputValue && length > 0 ? `Count: ${length}` : ''}
      {React.Children.map(children, child => {
        return child.props.id === 'clickableInput' ? child : null;
      })}
    </components.ValueContainer>
  );
};

export default () => (
<Select
components={{ ValueContainer, Option}}
isMulti
name="mySelect"
options={colourOptions}
className="basic-multi-select"
classNamePrefix="select"
inputId='clickableInput'
isSearchable
hideSelectedOptions={false}
closeMenuOnSelect={false}
/>
);

https://codesandbox.io/s/sharp-poincare-1xeng

[Rall3n]

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:

return <ValueContainer>
  {hasValue & myValueChild}
  {otherChildren}
</ValueContainer>;

[tranhoangnhi95]

Hello @Rall3n.
It works for me. Thank you very much.

[tranhoangnhi95]

Hello @Rall3n ,
Because of using a custom value container, so when I select the option, my input value is clean too. Are there any props to handle my input for filtering?

[Rall3n]

@tranhoangnhi95 That is not a "Using a custom ValueContainer" problem, but the default behavior of the Select component.

We have an example on the site which implements a "Keep input after selection" feature using the onInputChange prop. Check out the Advanced >> Action meta section.