Select ignores onInputChange handler when it returns inputValue as an empty string

[KateDunnican]

I'm attempting to enforce a maximum character count and keep users from entering certain characters.
Here is my Select:

<AsyncCreatableSelect
  isMulti
  isSearchable
  defaultOptions
  cacheOptions
  defaultValue={optionsDefaultValue}
  onChange={value => setUpdatedOptionsList(value)}
  onInputChange={handleOnInputChange}
  theme={theme}
  styles={isSavingOptions ? disabledStyles : styles}
  isDisabled={isSavingOptions}
  components={{ ClearIndicator: null, LoadingIndicator: null }}
/>

and here is the handler in question:

const handleOnInputChange = inputValue =>{
  if(inputValue.length > 3){
     inputValue = inputValue.substring(0, 3);
  }
  else{
     const forbiddenCharacters = /[^a-zA-Z0-9.\-_ ]/g;
     if(inputValue.match(forbiddenCharacters)){
       inputValue = inputValue.replace(forbiddenCharacters, '');
     }
  }
  return inputValue;
}

Typing in :

1. "dog" shows "dog"
2. "dogs" shows "dog"
3. "do#" shows "do"
4. "#" shows "#"
5. "#f" shows "f"
6. "#$" shows "#$"

In scenarios 4 and 6, inputValue is being returned as an empty string. I even had a console log in there at one point to make sure that's what it was doing but, instead of showing that, the Select continues to show the forbidden character (unless the user types an approved character after, in which case it removes the forbidden one as shown in scenario 5) even though the inputValue is empty. I also tried hard coding it to return inputValue as an empty string (also tried null), and it just showed whatever I typed instead of nothing. Any time the handler returns an empty string, the Select seems to just...refuse to acknowledge it.

Thank you!

[Rall3n]

Hello @katemckinney,

It seems that the Async and the AsyncCreatable components (respectively the useAsync hook) do not pass the internal value for inputValue to the underlying Select component when using it un-controlled.

For now you should keep the inputValue in state and forward it yourself to the component.

const [inputValue, setInputValue] = useState('');

<AsyncCreatable
  onInputChange={inputValue => {
    /* ... */
    setInputValue(inputValue);
  }}
  inputValue={inputValue}
/>

Also its best if you always "substring" the value or else you won't be able to filter out unwanted characters if the string is longer than 3 characters.

(inputValue) => {
  // `.substring(...)` will always return a value, even if the string is shorter
  inputValue = inputValue.substring(0,3);

  // Filter inputValue for unwanted characters

  // Set state
}

[KateDunnican]

Thank you for your quick response and help!

I couldn't use your exact solution as VS complained that inputValue had already been defined above when I tried to do the onInputChange={inputValue=> part, so I just renamed the state part of it inputValueState and that got everything working! I also re-arranged where setInputValueState was used but that's really just cause I like the look better.

const [inputValueState, setInputValueState] = useState('');

const handleOnInputChange = inputValue => {
  let result = inputValue.substring(0,3);
  const forbiddenCharacters = /[^a-zA-Z0-9.\-_ ]/g;
     if(result.match(forbiddenCharacters)){
       result = result.replace(forbiddenCharacters, '');
     }
  setInputValueState(result);
}

<AsyncCreatable
  onInputChange={handleOnInputChange}
  inputValue={inputValueState}
/>