I am facing an issue with the autoComplete feature in my React project. The react-text-mask component looks like this:
<MaskedInput
{...other}
ref={ref => {
inputRef(ref ? ref.inputElement : null);
return ref;
}}
mask={[
/\d/,
/\d/,
/\d/,
/\d/,
' ',
/\d/,
/\d/,
/\d/,
' ',
/\d/,
/\d/,
/\d/,
/\d/,
]}
placeholderChar={'\u2000'}
/>;
and the autoComplete component is as follows:
<AmountAutoComplete
options={this.state.autoCompleteOptions.map(option => option.title)}
renderInput={params => {
return (
<TextField
value={this.props.value}
onChange={e => {
onValueChange(e.currentTarget.value, '');
}}
InputProps={{
inputComponent: this.TextMaskCustom,
}}
/>
);
}}
/>;
The error message I am receiving is:
Cannot read property 'selectionEnd' of null at handleClick (useAutocomplete.js:763)
and the error pertaining to inputRef at line 763 in useAutocomplete.js is:
var handleClick = function handleClick() { if (firstFocus.current && inputRef.current.selectionEnd - inputRef.current.selectionStart === 0) { inputRef.current.focus(); inputRef.current.select(); }