import * as React from 'react' ; import * as PropTypes from 'prop-types' ; import Input from '../Input' ; import { LocalInputProps , InputProps , inputPropTypes , inputDefaultProps } from '../Input/Input' ; import { SelectMenuSearchInput as _SelectMenuSearchInput } from './styled' ; export type LocalSelectMenuSearchInputProps = LocalInputProps & { isDropdownActive ? : boolean ; } ; export type SelectMenuSearchInputProps = InputProps & LocalSelectMenuSearchInputProps ; export const selectMenuSearchInputPropTypes = { ... inputPropTypes } ; export const selectMenuSearchInputDefaultProps = { ... inputDefaultProps , autoComplete : 'off' , before : < Input . Icon icon = "search" />, isDropdownActive : false , isFullWidth : true , placeholder : 'Type to search...' } ; export class SelectMenuSearchInput extends React . Component < LocalSelectMenuSearchInputProps > { static propTypes = selectMenuSearchInputPropTypes ; static defaultProps = selectMenuSearchInputDefaultProps ; search = React . createRef < HTMLInputElement > ( ) ; componentDidUpdate = ( prevProps ) => { const { isDropdownActive } = this . props ; const { isDropdownActive : prevIsDropdownActive } = prevProps ; if ( isDropdownActive && ! prevIsDropdownActive ) { requestAnimationFrame ( ( ) => this . search . current && this . search . current . focus ( ) ) ; } } ; render = ( ) => { const { ... props } = this . props ; return < _SelectMenuSearchInput { ... props } inputRef = { this . search } / > ; } ; } export default SelectMenuSearchInput ;