Referencing React Select

Question

When i try to reference React Select into variable, i get StateManager instead Select and typesctipt doesn't know this.selectRef.current.select but this select is in variable. Is beter solution then retype this.selectRef.current.select as Select<T>?

I would like to expand select from click on other element.

import Select from "react-select";

interface OwnProps<T> {
  alignRight?: boolean;
  components?: ComponentsType<T>;
  defaultValue?: Value<T>;
  disabled?: boolean;
  isSearchable?: boolean;
  onChange?: DropdownChangeHandler<T>;
  onBlur?: React.FocusEventHandler;
  options: T[];
  placeholder?: string;
  value: Value<T>;
  menuPortalTarget?: HTMLElement | null;
  dataTest?: string;
}

export default class Dropdown<T = Option> extends React.PureComponent<OwnProps<T>> {
  static defaultProps = {
    isSearchable: false,
  };

  selectRef: React.RefObject<Select<T>>

  constructor(props: OwnProps<T>){
    super(props);
    this.selectRef = React.createRef();
  }

  expand = () => {
    console.log(this.selectRef)
    // this.selectRef.current.select
  };

  render() {
    const {
      alignRight,
      components,
      menuPortalTarget,
      defaultValue,
      disabled,
      isSearchable,
      onChange,
      options,
      onBlur,
      placeholder,
      value,
      dataTest,
    } = this.props;

    return (
      <div data-test={dataTest}>
        <Select<T>
          components={components}
          defaultValue={defaultValue}
          isDisabled={disabled}
          isSearchable={isSearchable}
          menuPortalTarget={menuPortalTarget}
          onBlur={onBlur}
          onChange={onChange}
          options={options}
          placeholder={placeholder}
          ref={this.selectRef}
          value={value}
        />
      </div>
    );
  }
}

Answer 1

Update your definition of the expand function as given below. And call it on click of the other element.

expand = () => {
  if (!this.selectRef.current) {
    return;
  }
  this.selectRef.current.onMenuOpen();
}

This will work.