Open yarimiz opened 4 years ago
itsppal02
commented
4 years ago 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.
minusthebear02
commented
4 years ago 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.
icelord2
commented
3 years ago 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.
Alkamenos
commented
3 years ago 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>
)}
/>
danielagomes
commented
3 years ago Is there any workaround for this issue?
MatejFacko
commented
3 years ago Guys, any update on this? Still crashing with React Hook Form,
Sanjuhub
commented
2 years ago 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.
jhallinan
commented
1 year ago 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
KristianLonergan
commented
1 year ago @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,
}}
e-kibet
commented
1 year ago The caused of this error is this line: inputRef={} Please remove it if you want a peace
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 undefinedfollowed 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)