onBlur doesn't work in custom component

hi, a thousand apologies for post this here, but this crash my mind

i don’t understand why onBlur doesn’t work

what i expect: when i choose some checkboxes with options and click whatever at the page - select will collapse

what i get: select collabes only when i click on arrow

pls help me and sorry for my poor english

you can check code here - https://codesandbox.io/s/elegant-mestorf-7rvl8

and i past it here

import ReactDOM from "react-dom";

import Select, { components } from "react-select";

const styles = {
  option: styles => ({
    ...styles,
    backgroundColor: "#ffff",
    color: "black"
  })
};

const Option = props => (
  <components.Option {...props}>
    <input type="checkbox" checked={props.isSelected} readOnly />
    <label>{props.data.label}</label>
  </components.Option>
);

const ValueContainer = ({ children, selectProps, ...props }) => {
  console.log(selectProps);
  const { getValue, hasValue } = props;
  const countSelectedVal = getValue().length;
  if (!hasValue) {
    return (
      <components.ValueContainer {...props}>
        {children}
      </components.ValueContainer>
    );
  }
  return (
    <components.ValueContainer {...props}>
      {`${selectProps.messages.orderPageAnySelectPreText}: ${countSelectedVal}`}
    </components.ValueContainer>
  );
};

const OrderSelectMulti = ({ options, ...props }) => {
  const components = { ValueContainer, Option };
  const messages = {
    orderPageAnySelectPreText: "Selected"
  };
  return (
    <Select
      styles={styles}
      isMulti
      messages={messages}
      components={components}
      hideSelectedOptions={false}
      options={[
        { value: "Status1", label: "Status1" },
        { value: "Status2", label: "Status2" },
        { value: "Status3", label: "Status3" }
      ]}
      placeholder="BlaBla"
      {...props}
    />
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<OrderSelectMulti />, rootElement);

[colinscruggs]

I was facing the same issue you were, where you could only close the menu by clicking the arrow. I got around this with a deceptively simple workaround: render the children of the ValueContainer, but just style them to have opacity: 0. This will maintain the original ValueContainer’s functionality, but allow you to render whatever you want in the ValueContainer. Here’s my code:

const ValueContainer = props => {
  const {
    children,
    getValue,
    innerProps: { ...restInnerProps }
  } = props;
  
  const length = getValue().length;
  return (
    <components.ValueContainer
      {...restInnerProps}
      {...props}
    >

    <div style={{ opacity: 0 }}>{...children}</div>

    {length === 0
    ?  `Select...`
    : `${length} item${length != 1 ? 's' : ''} selected` }
    </components.ValueContainer>
  );
};

[rabbit0321]

I have the same issue. blur is not working and remain the blue border style on the element ‘sometimes’ after selecting an option if I have customized the component. e.g. When the error prop changed from ‘true’ to ‘false’ in the following function.

const customControl = useCallback(
    ({children, ...props}) => (
      <>
        <components.Control
          {...props}
          className={classnames({
            'custom-react-select': true,
            'is-invalid': error,
          })}
        >
          {children}
        </components.Control>
        <span className="invalid-feedback">
          <ErrorMessage name={name} />
        </span>
      </>
    ),
    [name, error]
  );