react-phone-number-input: Error trying to use inputComponent

Hi,

I’m trying to use the property inputComponent with the Input component from material-ui (https://material-ui.com/api/input/) but when I try to type something I get the error Uncaught TypeError: text.search is not a function and I’m not sure what is the problem. The documentation of this property is a little bit simple and I couldn’t understand what else I would need to do.

        <PhoneInput
          name={name}
          country={defaultCountry}
          dictionary={dictionary}
          international={international}
          value={value}
          limitMaxLength={limitMaxLength}
          onChange={phone => this.handleOnChange(name, phone)}
          inputComponent={Input}
          // inputComponent={<Input />}
          // inputComponent={props => <Input {...props} />}
        />

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 32 (16 by maintainers)

Commits related to this issue

#226 onChange(event) fix — committed to catamphetamine/react-phone-number-input by purecatamphetamine 5 years ago
#226 Reverted — committed to catamphetamine/react-phone-number-input by purecatamphetamine 5 years ago
#226 #283 Added `numberInputComponent` property — committed to catamphetamine/react-phone-number-input by purecatamphetamine 5 years ago

Most upvoted comments

@NevenLiang, did you ever develop this further?

It looks like if you supply your own inputComponent, then your input component is responsible for formatting the phone number value, too. Did you happen to add that feature to yours?

I was hoping that using a custom inputComponent would only change which input was used (mostly to make the look consistent with the other inputs in the form) but everything else would work the same.

Automatic formatting of the phone number seems like something react-phone-number-input could/should do for you regardless of which inputComponent you happen to be using. I wish that functionality were exposed buried within InputBasic. (I wonder if that was necessary due to differences between InputBasic and InputSmart?)

TylerRick on Sep 25, 2019

But in the code onChange(event.target.value), onChange is the props.onChange from <PhoneInput/>.

Is the description in document not very accurate?

Using the parameter passed to props.onChange from <PhoneInput/> must be a string, it may be more accurate.

I suggest that you add some example like this, to the github page of this project.

import React from 'react';
import TextField from 'material-ui/TextField';
import PhoneNumberInput from 'react-phone-number-input';

import 'react-phone-number-input/style.css';

<PhoneNumberInput
  country="US"
  placeholder="Phone Number"
  value={this.props.model.phoneNumber.value}
  onChange={this.props.handleChange}
  inputComponent={PhoneNumberTextField}
/>

...

class PhoneNumberTextField extends React.Component {
  setRef = ref => {
    this.input = ref;
  };

  focus = () => {
    this.input.focus();
  };

  render() {
    // just extract `country` and `metadata` out of `props`,
    // not passing to the input component
    const {country, metadata, onChange, ...rest } = this.props;

    return (
      <TextField
        {...rest}
        id="phoneNumber"  // not necessary
        floatingLabelText="Phone Number"  // not necessary
        ref={this.setRef}
        // `props.onChange` only accept string
        onChange={event => onChange(event.target.value)}  
      />
    )
  }
}

NevenLiang on Jul 15, 2019