Getting the value that was entered into the input initially

[plee-nm]

I am trying to get the original value that the user types into the input. I have found valueBeforeUpDown in the state which looks to be exactly what I need but I don't see any documentation around it. Is valueBeforeUpDown or a similar property available to use or is it a part of private api? I personally need this value for onSuggestionSelected and I can make a PR to add this value to the meta values object if need be.

[aarondack]

@plee-nm Are you just trying to access the text input?

From the example ⬇️ newValue is what you are looking for within the onChange handler.

 onChange = (event, { newValue, method }) => {
   // newValue is typed value
    this.setState({
      value: newValue
    });
  };

[plee-nm]

@aarondack No I want the value that the user initially typed in. For example I type in al to a state field and press down to get to Alabama the onChange newValue is Alabama and I want a way to get al. The original value appears when you cycle through all of the select options so I know it is being stored somewhere. I think valueBeforeUpDown is what I need but it is not documented (and probably rightfully so).

[aarondack]

@plee-nm I see what you are saying now. Can you not get that out of the native event.target.value? This is just a wrapped onChange handler.

[plee-nm]

@aarondack No because the event.target.value will just be the value that was highlighted as well.

[aarondack]

@plee-nm Are you sure? I just tried this out on a codepen and it looks to be working.

What are you trying to accomplish with the original value?

[plee-nm]

@aarondack Yes, you can double check but in your demo you need to type c and then the down arrow twice. You will see that the input changes from c to Caley and then Casey but I want the original c value. I need this value for analytics to see how many characters they enter before the end user finds the result they are looking for.

[aarondack]

@plee-nm

Gotcha that makes a ton of sense. You can pass arbitrary props within inputProps. My suggestion to you would be to pass in an onKeyUp within inputProps and then have logic around the arrow keys to get your desired result. I still believe this is something that can be handled outside the scope of this lib. Maybe something like this?

const inputProps = {
      placeholder: "Type 'c'",
      value,
      onChange: this.onChange,
      onKeyUp: this.onKeyUp
    };

onKeyUp = (e) => {
 if (e.keyCode !== 38 && e.keyCode !== 40) { //Or whatever you need exactly (13, etc)
	// Do something with event.target.value
}

[plee-nm]

@aarondack I actually got it working with the valueBeforeUpDown property I just didn't see it documented and wanted to know if I could add it to onSuggestionSelected.