react-phone-number-input inputComponent property causes error

Question

I'm using react-phone-number-input component for phone numbers. I want it to look like other input components (antd) inputComponent={Input} is fixing the style problem. But it causes error as soon as I pressed any key while in the phone input field

<Form.Item name="telefonNo" label={t("kisi.telefonNo")}>
  <PhoneInput defaultCountry={"TR"} placeholder={t("kisi.telefonNoHint")} inputComponent={Input} />
</Form.Item>

this is the error:

Uncaught runtime errors:
×
ERROR
element.hasAttribute is not a function
TypeError: element.hasAttribute is not a function
    at isReadOnly (http://localhost:3000/static/js/bundle.js:348693:18)
    at onKeyDown (http://localhost:3000/static/js/bundle.js:349037:58)
    at http://localhost:3000/static/js/bundle.js:349277:71
    at handleKeyDown (http://localhost:3000/static/js/bundle.js:191147:51)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:230623:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:230667:20)
    at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:230724:35)
    at invokeGuardedCallbackAndCatchFirstError (http://localhost:3000/static/js/bundle.js:230738:29)
    at executeDispatch (http://localhost:3000/static/js/bundle.js:234882:7)
    at processDispatchQueueItemsInOrder (http://localhost:3000/static/js/bundle.js:234908:11)
ERROR
element.hasAttribute is not a function
TypeError: element.hasAttribute is not a function
    at isReadOnly (http://localhost:3000/static/js/bundle.js:348693:18)
    at onKeyDown (http://localhost:3000/static/js/bundle.js:349037:58)
    at http://localhost:3000/static/js/bundle.js:349277:71
    at handleKeyDown (http://localhost:3000/static/js/bundle.js:191147:51)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:230623:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:230667:20)
    at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:230724:35)
    at invokeGuardedCallbackAndCatchFirstError (http://localhost:3000/static/js/bundle.js:230738:29)
    at executeDispatch (http://localhost:3000/static/js/bundle.js:234882:7)
    at processDispatchQueueItemsInOrder (http://localhost:3000/static/js/bundle.js:234908:11)
ERROR
Cannot read properties of undefined (reading 'length')
TypeError: Cannot read properties of undefined (reading 'length')
    at parse (http://localhost:3000/static/js/bundle.js:349154:23)
    at formatInputText (http://localhost:3000/static/js/bundle.js:349085:70)
    at onChange (http://localhost:3000/static/js/bundle.js:349017:3)
    at http://localhost:3000/static/js/bundle.js:349271:70
    at handleChange (http://localhost:3000/static/js/bundle.js:115672:57)
    at resolveOnChange (http://localhost:3000/static/js/bundle.js:191380:5)
    at triggerChange (http://localhost:3000/static/js/bundle.js:191122:75)
    at onInternalChange (http://localhost:3000/static/js/bundle.js:191132:5)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:230623:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:230667:20)
ERROR
Cannot read properties of undefined (reading 'length')
TypeError: Cannot read properties of undefined (reading 'length')
    at parse (http://localhost:3000/static/js/bundle.js:349154:23)
    at formatInputText (http://localhost:3000/static/js/bundle.js:349085:70)
    at onChange (http://localhost:3000/static/js/bundle.js:349017:3)
    at http://localhost:3000/static/js/bundle.js:349271:70
    at handleChange (http://localhost:3000/static/js/bundle.js:115672:57)
    at resolveOnChange (http://localhost:3000/static/js/bundle.js:191380:5)
    at triggerChange (http://localhost:3000/static/js/bundle.js:191122:75)
    at onInternalChange (http://localhost:3000/static/js/bundle.js:191132:5)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:230623:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:230667:20)

Lin Du · Accepted Answer · 2025-02-27 11:12:05Z

Docs says:

inputComponent

Any custom input component implementation must use React.forwardRef() to "forward" ref to the underlying "core" <input/> component.

However, antd <Input/> component uses rc-input underly, the ref is:

export interface InputRef {
    focus: (options?: InputFocusOptions) => void;
    blur: () => void;
    setSelectionRange: (start: number, end: number, direction?: 'forward' | 'backward' | 'none') => void;
    select: () => void;
    input: HTMLInputElement | null;
    nativeElement: HTMLElement | null;
}

You need to use ref.current.input to get the origin input element.

So, try below:

import React, { useRef, useImperativeHandle } from "react";
import type { InputRef } from "antd";
import { Form, Input as AntdInput } from "antd";
import PhoneInput from "react-phone-number-input";

const Input = React.forwardRef((props, ref) => {
  const inputRef = useRef<InputRef | null>(null);
  useImperativeHandle(ref, () => inputRef.current?.input, []);
  return <AntdInput ref={inputRef} {...props} />;
});

const App: React.FC = () => {
  return (
    <Form name="basic" autoComplete="off">
      <Form.Item name="telefonNo" label="kisi.telefonNo">
        <PhoneInput
          defaultCountry={"TR"}
          onChange={() => {
            /** */
          }}
          inputComponent={Input}
        />
      </Form.Item>
    </Form>
  );
};

export default App;

codesandbox

Collectives™ on Stack Overflow

react-phone-number-input inputComponent property causes error

1 Answer 1

inputComponent

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

inputComponent

Comments

Your Answer

Sign up or log in

Post as a guest

Related