material-ui-phone-number
material-ui-phone-number copied to clipboard
alexplumb
Setting inputRef causes the app to crash when changing value
When using inputRef property for the component, an exception is thrown when changing the value of the text field.
For example:
<MuiPhoneNumber label="Phone" name="phoneNumber" inputRef={register()} />
Uncaught TypeError: Cannot read property 'focus' of undefined
followed by
Uncaught TypeError: Cannot read property 'setSelectionRange' of undefined at e.<anonymous> (index.js:1) at callCallback (react-dom.development.js:12490) at commitUpdateQueue (react-dom.development.js:12511) at commitLifeCycles (react-dom.development.js:19858) at commitLayoutEffects (react-dom.development.js:22803) at HTMLUnknownElement.callCallback (react-dom.development.js:188) at Object.invokeGuardedCallbackDev (react-dom.development.js:237) at invokeGuardedCallback (react-dom.development.js:292) at commitRootImpl (react-dom.development.js:22541) at unstable_runWithPriority (scheduler.development.js:653) at runWithPriority$1 (react-dom.development.js:11039) at commitRoot (react-dom.development.js:22381) at finishSyncRender (react-dom.development.js:21807) at performSyncWorkOnRoot (react-dom.development.js:21793) at react-dom.development.js:11089 at unstable_runWithPriority (scheduler.development.js:653) at runWithPriority$1 (react-dom.development.js:11039) at flushSyncCallbackQueueImpl (react-dom.development.js:11084) at flushSyncCallbackQueue (react-dom.development.js:11072) at flushPendingDiscreteUpdates (react-dom.development.js:21847) at flushDiscreteUpdates (react-dom.development.js:21827) at finishEventHandler (react-dom.development.js:764) at batchedEventUpdates (react-dom.development.js:798) at dispatchEventForLegacyPluginEventSystem (react-dom.development.js:3568) at attemptToDispatchEvent (react-dom.development.js:4267) at dispatchEvent (react-dom.development.js:4189) at unstable_runWithPriority (scheduler.development.js:653) at runWithPriority$1 (react-dom.development.js:11039) at discreteUpdates$1 (react-dom.development.js:21887) at discreteUpdates (react-dom.development.js:806) at dispatchDiscreteEvent (react-dom.development.js:4168)
Same issue getting on my side and my app to crash when changing value For Example: <MuiPhoneNumber fullWidth variant="outlined" label="Phone no" id="phone" defaultCountry={'in'} error={Boolean(errors && errors.phone)} inputRef={register({phone: true})} onChange={onChangePhoneHandler} />
Uncaught TypeError: Cannot read property 'setSelectionRange' of undefined
at e.
If you're using React Hook Form, which it looks like you might be, you can use the <Controller /> component and set as={MuiPhoneNumber} on it. Check it out here.
This issue still should probably get fixed, but this work around worked for me.
I get the same issue and as= will be deprecated soon
Important: This prop is getting deprecated in the next major version, use render instead.
The same error(
<Controller
control={control}
name={name}
render={({
field: { onChange, onBlur, value, name, ref },
fieldState: { invalid, isTouched, isDirty, error },
formState,
}) => (
<FormattedHTMLMessage id={lexeme}>
{(placeholder) => (
<MuiPhoneNumber
label="Phone Number"
data-cy="user-phone"
defaultCountry={defaultCountry}
value={value}
onChange={onChange}
onBlur={onBlur}
inputRef={ref}
name={name}
placeholder={placeholder}
helperText={error?.message}
error={!!error}
/>
)}
</FormattedHTMLMessage>
)}
/>
In my case, adding numbers to the input field works well, but when I am trying to delete the numbers, the app gets crashed with error: "TypeError: Cannot read properties of undefined (reading 'setSelectionRange')" Please let me know if anyone has found any workaround.
Any update on this? Still running into an issue with it with material-ui-phone-number v3.0.0 and react-hook-form v7.41.5
@jhallinan What worked for me was setting the ref inside inputProps prop:
<Controller
name={name}
rules={inputRules}
render={({ field: { ref, ...rest }, fieldState: { error } }) => {
return (
<MuiPhoneNumber
{...rest}
fullWidth
variant="outlined"
data-testid={name}
required={required}
error={!!error}
label={t<string>('phone_number')}
helperText={error?.message || helperText}
inputProps={{
ref: ref,
'data-testid': name + '-input',
...inputProps,
}}
countryCodeEditable={true}
{...props}
/>
);
}}
/>
This block:
inputProps={{
ref: ref,
'data-testid': name + '-input',
...inputProps,
}}
The caused of this error is this line: inputRef={} Please remove it if you want a peace
