Ufuk Ugur
Ufuk Ugur

Reputation: 354

react-phone-number-input inputComponent property causes error

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)

without inputComponent

with inputComponent

Upvotes: 0

Views: 36

Answers (0)

Related Questions