Problem: I want the user to be able to enter a new value in text input, not only selecting one from the dropdown list.
For the moment the user cannot do that. What should I fix so the user can do both?
Example: The user enters the term Test, the options from the dropdown are "Test1", "Test2", but he wants to enter the value of "Test 3". With my implementation the user is only allowed to choose from list of dropdown
const [showValueDropdown,setShowValueDropdown ] = useState<boolean>(false); const [selectedValue, setSelectedValue] = useState(''); //Function to select from the dropdown items const handleSelectedValues = (value: IValue): void => { setShowValueDropdown(false); const valueData= `${value.name} (${value.secondName})`; setSelectedValue(valueData); }; //Function to show dropdown items with dispatch const selectValue= async (term: string): Promise<void> => { const code= await LocalStorage.get(CODE); // code from backend to dispatch the request so the desired list of values can come. dispatch(valueData({ CODE, term })); setShowValueDropdown(term.length > 0); }; return (<View><View><View> <TextInput editable={true} //Text input to enter the term placeholder={placeholder} returnKeyType='done' autoCorrect={false} defaultValue={selectedValue} onChangeText={text => selectValue(text)} /></View></View> {listofValues.length > 0 && showValuesDropdown && ( //Rendering selected values from text input<View> {listOfValues.map((value, ind) => (<View><Text onPress={() => { handelSelectedValues(value); }}> {value.name} ({value.nameSecond})</Text></View> ))}</View> )}</View>