Setting inputRef causes the app to crash when changing value

[alexplumb]

Setting inputRef causes the app to crash when changing value

[Sanjuhub]

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.

[danielagomes]

Is there any workaround for this issue?

[MatejFacko]

Guys, any update on this? Still crashing with React Hook Form,

[itsppal02]

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. (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)

[minusthebear02]

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]

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]

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

[jhallinan]

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]

@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]

The caused of this error is this line:
inputRef={} Please remove it if you want a peace