score:0

If you want to access it from outside the SelectField component, I would recommend using React.forwardRef to forward the ref prop to your SelectField component so you can assign it on your own:

/* ... */

type GenericSelectField<TValue> = React.StatelessComponent<
  SelectFieldProps<TValue>
>;

type SelectFieldWithRef<TValue> = React.StatelessComponent<
  SelectFieldProps<TValue>,
  React.Ref<*>
>;

const RefSelectField: SelectFieldWithRef<SelectValue> = (props, ref: any) => {

    /* ... */

    return (<Select ref={ref} {...} />);
};

const SelectField: GenericSelectField<SelectValue> = React.forwardRef(RefSelectField);

export default SelectField;

In the component you want to call blur you have to do the following:

class ParentComponent extends Component {
    constructor(props) {
        super(props);

        this.selectRef = React.createRef();
    }

    somehowTriggerBlur = () => this.selectRef.current.blur();

    render() {
        return (<SelectField ref={ref} {...} />);
    }
}

score:1

If I understand this correctly you want to trigger Select's blur() inside of SelectField.

There are many ways for example parent-child-binding it via props. Here is a discussion about this:

Call child method from parent

score:2

You can use ref property on the Select component to get a reference to the instance of this component.

Then you can call the blur method of this instance.

const SelectField: GenericSelectField<SelectValue> = ({label = "",...rest}) => {
  const selectEl = React.useRef(null);      

  // this function could be a callback
  function handleBlur() {
    selectEl.current.blur();
  }

  return (
    <div className="react-select-wrapper">
      {label ? <span className="input__label">{label}</span> : null}
      <Select ref={selectEl} classNamePrefix="react-select" {...rest} />
    </div>
  );
}

export default SelectField;

If you need to access the blur method outside of your SelectField component, you could use forwardRef to reference Select instead of the SelectField.

const SelectField = (props, ref) => {
  const {label = "",...rest} = props;
  const selectEl = React.useRef(null);      

  return (
    <div className="react-select-wrapper">
      {label ? <span className="input__label">{label}</span> : null}
      <Select ref={ref} classNamePrefix="react-select" {...rest} />
    </div>
  );
}

export default React.forwardRef(SelectField);

Then you can call the blur method with the reference of the SelectField component :

const ref = React.createRef();
<SelectField ref={ref} label=""/>;

ref.blur();

Related Query

More Query from same tag