import React , { Component , KeyboardEventHandler } from 'react' ; import CreatableSelect from 'react-select/creatable' ; import { ActionMeta , OnChangeValue } from 'react-select' ; const components = { DropdownIndicator : null , } ; interface Option { readonly label : string ; readonly value : string ; } const createOption = ( label ) => ( { label , value : label , } ) ; interface State { readonly inputValue : string ; readonly value : readonly Option [ ] ; } export default class CreatableInputOnly extends Component < { } , State > { state : State = { inputValue : '' , value : [ ] , } ; handleChange = ( value , actionMeta ) => { console . group ( 'Value Changed' ) ; console . log ( value ) ; console . log ( `action: ${ actionMeta . action }` ) ; console . groupEnd ( ) ; this . setState ( { value } ) ; } ; handleInputChange = ( inputValue ) => { this . setState ( { inputValue } ) ; } ; handleKeyDown : KeyboardEventHandler < HTMLDivElement > = ( event ) => { const { inputValue , value } = this . state ; if ( ! inputValue ) return ; switch ( event . key ) { case 'Enter' : case 'Tab' : console . group ( 'Value Added' ) ; console . log ( value ) ; console . groupEnd ( ) ; this . setState ( { inputValue : '' , value : [ ... value , createOption ( inputValue ) ] , } ) ; event . preventDefault ( ) ; } } ; render ( ) { const { inputValue , value } = this . state ; return ( < CreatableSelect components = { components } inputValue = { inputValue } isClearable isMulti menuIsOpen = { false } onChange = { this . handleChange } onInputChange = { this . handleInputChange } onKeyDown = { this . handleKeyDown } placeholder = "Type something and press enter..." value = { value } / > ) ; } }