Converting text to UPPER case seems to not format the hint correctly.

[Johnne25]

I need the Input to be all in uppercase. There is PROP passed to allow turning the UPPER / LOWERCASE on and off. The isActive is used to display the floating label. I am using this method to accomplish this:

  handleTextChange = (event) => {
    const input = event.target;
    const start = input.selectionStart;
    const end = input.selectionEnd;

    let newtext = input.value;

    console.log(newtext);

    if (this.props.uppercase) {
     this.setState(
       {value: input.value.toUpperCase()},
       () => input.setSelectionRange(start, end)
     );
   } else if (this.props.lowercase) {
     this.setState(
       {value: input.value.toLowerCase()},
       () => input.setSelectionRange(start, end)
     );
    } else {
     this.setState(
       {value: input.value }
     );
    }
   if (newtext !== '') {
       this.setState({
         isActive: true
       });
     } else {
       this.setState({
         isActive: false
       });
     }   
  }

The hintData has already been converted to UPPERCASE. It uses a preset ARRAY, no need to fetch data with AXIO.

NOTE: If you click outside the Input component and click back in the hint is displayed correctly.

[Johnne25]

Note: That if you actually use UPPERCASE characters (ie: holding the shift key down) in the input it seems to work correctly. Only the conversion of the lowercase to uppercase does the formatting issue happen.

[ejmudi]

@Johnne25 I published a bugfix to handle cases like this here: https://github.com/ejmudi/react-autocomplete-hint/releases/tag/v1.2.2

To use the new release in this case, you need to make use of the new valueModifier prop. Your code would be something like this:

  changeCase = (value) => {
    if (this.props.uppercase) {
      return value.toUpperCase();
    } else if (this.props.lowercase) {
      return value.toLowerCase();
    } else {
      return value;
    }
  }

  handleTextChange = (event) => {
    const input = event.target;
    const start = input.selectionStart;
    const end = input.selectionEnd;

    let newtext = input.value;

    this.setState(
      { value: this.changeCase(input.value) },
      () => {
        if(this.props.uppercase || this.props.lowercase){
          input.setSelectionRange(start, end);
        }
      }
    );

    if (newtext !== '') {
      this.setState({
        isActive: true
      });
    } else {
      this.setState({
        isActive: false
      });
    }
  }

  render = () => {
    return (
      <Hint options={options} valueModifier={this.changeCase}>
        <input
          value={this.state.value}
          onChange={this.handleTextChange} />
      </Hint>
    );
  }

I have updated the README to reflect the new valueModifier prop and how to use it.