Class Select

packages/select/src/components/select/select.tsx:78–232

}

export class Select<T> extends React.PureComponent<ISelectProps<T>, ISelectState> {
    public static displayName = `${DISPLAYNAME_PREFIX}.Select`;

    public static ofType<T>() {
        return Select as new (props: ISelectProps<T>) => Select<T>;
    }

    public state: ISelectState = { isOpen: false };

    private TypedQueryList = QueryList.ofType<T>();

    private inputEl: HTMLInputElement | IRefObject<HTMLInputElement> | null = null;
    private queryList: QueryList<T> | null = null;
    private previousFocusedElement: HTMLElement | undefined;
    private refHandlers = {
        input: isRefObject<HTMLInputElement>(this.props.inputProps?.inputRef)
            ? (this.inputEl = this.props.inputProps!.inputRef)
            : (ref: HTMLInputElement | null) => {
                  this.inputEl = ref;
                  (this.props.inputProps?.inputRef as IRefCallback<HTMLInputElement>)?.(ref);
              },
        queryList: (ref: QueryList<T> | null) => (this.queryList = ref),
    };

    public render() {
        // omit props specific to this component, spread the rest.
        const { filterable, inputProps, popoverProps, ...restProps } = this.props;

        return (
            <this.TypedQueryList
                {...restProps}
                onItemSelect={this.handleItemSelect}
                ref={this.refHandlers.queryList}
                renderer={this.renderQueryList}
            />
        );
    }

    public componentDidUpdate(_prevProps: ISelectProps<T>, prevState: ISelectState) {
        if (this.state.isOpen && !prevState.isOpen && this.queryList != null) {
            this.queryList.scrollActiveItemIntoView();
        }
    }

    private renderQueryList = (listProps: IQueryListRendererProps<T>) => {
        // not using defaultProps cuz they're hard to type with generics (can't use <T> on static members)
        const { filterable = true, disabled = false, inputProps = {}, popoverProps = {} } = this.props;

        const input = (
            <InputGroup
                leftIcon="search"
                placeholder="Filter..."
                rightElement={this.maybeRenderClearButton(listProps.query)}
                {...inputProps}
                inputRef={this.refHandlers.input}
                onChange={listProps.handleQueryChange}
                value={listProps.query}
            />