Getting runtime error "Error Cannot read property 'focus' of null"

[kassah-mahmoud]

Hi, I am just having a normal use as follows:

<PhoneInput 
      inputClass={"profile-phoneInput px18"}
      dropdownClass={"profile-phoneDropDown px18"}
      buttonClass={"profile-phoneFlag ml-3"}
      searchClass={"profile-phoneSearch"}
      country={"eg"}
      value={state.phoneNumber}
      onChange={(value, data) =>
        onChangePhone(value, data, "phoneNumber")
      }
      enableAreaCodes={true}
      enableSearch={true}
      disableSearchIcon={true}
      countryCodeEditable={false}
      regions={["middle-east", "africa"]}
      excludeCountries={["il"]}
  />

When I change the dial code from the dropdown, I got the following runtime error:

Error in function r.cursorToEnd in ./node_modules/react-phone-input-2/lib/lib.js:6
Cannot read property 'focus' of null

Any ideas about this issue?
Thanks

[kieran23101]

@kassah-mahmoud - Did you manage to fix this issue?

[kassah-mahmoud]

Hi @kieran23101
I am sorry for the late response. The project I was working on has been frozen for a few months and now I gotta work on it and solve this issue.
I managed to do a workaround by setting jumpCursorToEnd property to false and autoFocus input prop to true
Here is how my code looked like after that:

 <PhoneInput
    inputClass={"profile-phoneInput px18"}
    dropdownClass={"profile-phoneDropDown px18"}
    buttonClass={"profile-phoneFlag ml-3"}
    searchClass={"profile-phoneSearch"}
    country={"eg"}
    value={state.phoneNumber}
    onChange={(value, data) =>
      onChangePhone(value, data, "phoneNumber")
    }
    enableAreaCodes={true}
    enableSearch={true}
    disableSearchIcon={true}
    countryCodeEditable={false}
    regions={["middle-east", "africa"]}
    excludeCountries={["il"]}
    jumpCursorToEnd={false}
    inputProps={{
      autoFocus: true
    }}
  />