CODEWITHSUNDEEP
reactjsautocompletematerial-ui
Mohammad Shourabi
Mohammad Shourabi

Reputation: 41

Cannot read property 'selectionEnd' of null in aoutoComplete material UI

I have a problem with autoComplete the react-text-mask is 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 like this:

<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,
        }}
      />
    );
  }}
/>;

and the error is

Cannot read property 'selectionEnd' of null at handleClick (useAutocomplete.js:763)

and in useAutocomplete.js:763 have the error about inputRef:

var handleClick = function handleClick() { if (firstFocus.current && inputRef.current.selectionEnd - inputRef.current.selectionStart === 0) { inputRef.current.focus(); inputRef.current.select(); }

Upvotes: 1

Views: 2731

Answers (1)

Mohammad Shourabi
Mohammad Shourabi

Reputation: 41

I should send params into textField like this:

<TextField
    {...params}
     InputProps={{
     ...params.InputProps,
    }} 
 />

Upvotes: 2

Related Questions