import { isNull } from 'lodash' ; import { ChangeEvent , useEffect , useRef } from 'react' ; import capitalizeFirstLetter from '../../utils/capitalizeFirstLetter' ; import styles from './SortOptions.module.css' ; interface Props { activeSort : string ; updateSort : ( value : string ) => void ; disabled : boolean ; } const DEFAULT_SORT = 'relevance' ; const SORT_OPTS = [ DEFAULT_SORT , 'stars' ] ; const SortOptions = ( props ) => { const selectEl = useRef < HTMLSelectElement > ( null ) ; const handleChange = ( event ) => { props . updateSort ( event . target . value ) ; forceBlur ( ) ; } ; const forceBlur = ( ) : void => { if ( ! isNull ( selectEl ) && ! isNull ( selectEl . current ) ) { selectEl . current . blur ( ) ; } } ; useEffect ( ( ) => { if ( ! SORT_OPTS . includes ( props . activeSort ) ) { props . updateSort ( DEFAULT_SORT ) ; } } , [ props ] ) ; return ( < div className = "d-flex flex-nowrap align-items-center" > < label className = "form-label d-none d-sm-inline mb-0" > Sort : < /label> < select ref = { selectEl } className = { `form-select form-select-sm ms-2 ${ styles . select }` } aria - label = "sort-options" value = { props . activeSort } onChange = { handleChange } disabled = { props . disabled } > { SORT_OPTS . map ( ( value ) => ( < option key = { `sort_${ value }` } value = { value } > { capitalizeFirstLetter ( value ) } < /option>))} ; < /select> < /div>); } ; export default SortOptions ;