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

[TylerRick]

@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?)

[NevenLiang]

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