Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

value gives [object Object] if inputComponnent={Input} and this Input is imported from "@material-ui/core" #214

Closed
mghazanfar opened this issue Nov 27, 2018 · 9 comments

Comments

@mghazanfar
Copy link

@mghazanfar mghazanfar commented Nov 27, 2018

<PhoneInput
              inputComponent={TextField}
              limitMaxLength
              value={phone}
              onChange={value => this.handlePhone(value)}
              error={phone ? (isValidPhoneNumber(phone) ? undefined : 'Invalid phone number') : 
'Phone number required'}
 />

Neither TextField not Input from material-ui/core works fine. Your component works perfectly fine but when we use Input from material-ui, it starts giving [object Object] in value where expected value is the entered phone number. Please help!

@catamphetamine

This comment has been minimized.

Copy link
Owner

@catamphetamine catamphetamine commented Nov 27, 2018

Inspect the [object Object] and see what it is.

@mghazanfar

This comment has been minimized.

Copy link
Author

@mghazanfar mghazanfar commented Nov 27, 2018

And also, using /react-responsive-ui for select to look appropriate for my app, I'm unable to type and search my desired country.

@mghazanfar

This comment has been minimized.

Copy link
Author

@mghazanfar mghazanfar commented Nov 27, 2018

@catamphetamine I inspected this. This is the value coming from onChange function and this is what comes in value and state is set.

@mghazanfar

This comment has been minimized.

Copy link
Author

@mghazanfar mghazanfar commented Nov 28, 2018

Any workaround till now @catamphetamine ?

@catamphetamine

This comment has been minimized.

Copy link
Owner

@catamphetamine catamphetamine commented Nov 28, 2018

And also, using /react-responsive-ui for select to look appropriate for my app, I'm unable to type and search my desired country.

This feature is not supported in react-responsive-ui.
You can write adapter for a custom Select using react-responsive-ui example.

I inspected this. This is the value coming from onChange function and this is what comes in value and state is set.

Post what exactly is the value, which properties does it have, etc.

@TylerRick

This comment has been minimized.

Copy link

@TylerRick TylerRick commented Sep 3, 2019

I ran into something similar when I tried to integrate this with TextField from @material-ui/core.

I think the problem was the that PhoneInput's onChange handler is expected to return a string value (phone) but MuiTextField onChange returns an event:

onChange={(event) => {return event.target.value}}

So as soon as you type, it caused an error.

There's probably a way to write an adapter but I gave up and just used the default input component for now...

@catamphetamine

This comment has been minimized.

Copy link
Owner

@catamphetamine catamphetamine commented Sep 3, 2019

@TylerRick

There's probably a way to write an adapter but I gave up and just used the default input component for now...

If the input field expects an event then one could simulate it with something like:

<CustomInput
  onChange={value => onChange({
    target: {
      value
    }
  )} />

Or something like that (maybe with dummy functions like preventDefault).
(Google something like "simulate input event from value")

@TylerRick

This comment has been minimized.

Copy link

@TylerRick TylerRick commented Sep 25, 2019

Thank you so much for your reply and suggested workaround. I don't think we even need to simulate an event though.

I finally found the solution to this problem (getting [object Object] as the value) that @mghazanfar
and I were having, in the comments on #226: @NevenLiang had a good example of an adapter component that adapts between the API of TextField and the API required by PhoneInput's inputComponent, which solves this and a few other issues (like the need to implement input.focus)

I've created a sandbox demo here: https://codesandbox.io/s/integrate-react-phone-number-input-with-material-uicore-ohfwp

The next major pain point with using material-ui is that there doesn't appear to be a way to pass props down to the input component. I'm suggesting we add one in issue #280.


Inspect the [object Object] and see what it is.

It's a string. Something is coercing the Event object into the string, "[object Object]".

@catamphetamine

This comment has been minimized.

Copy link
Owner

@catamphetamine catamphetamine commented Oct 16, 2019

@TylerRick

I finally found the solution to this problem (getting [object Object] as the value) that @mghazanfar
and I were having, in the comments on #226

And I finally figured out that indeed inputComponent isn't what I initially thought it was when replying in this issue.
Lol.
Indeed, just swapping inputComponent isn't enough.
I've added a new numberInputComponent property — this one is swappable and could be set to a Material UI input or whatever else.

Released react-phone-number-input@2.3.25 with the numberInputComponent property.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.