search

harish-everest / react-phone-input-mui

Highly customizable phone :telephone_receiver: input component with auto formatting
MIT License
24 stars 13 forks source link

Issue with label #6

Closed GhostyJade closed 2 years ago

GhostyJade commented 2 years ago

Hi After some testing with the new package version, I've found that there are some issues with the label. (I'm using a TextField with the "filled" variant) If i pass directly the label or the specialLabel prop to the component, it's rendered outside the component, If i pass undefined to the same props, it uses "Phone" as the localization string and it's rendered outside, If i pass the label into the inputProps object, the label is correctly rendered in the TextField but another label is added outside (see the attached image)

photo_2022-02-14_15-48-47

If u need more info or a CodeSandbox example I'm there Thanks in advance

harish-everest commented 2 years ago

@GhostyJade I have made the changes. Let me know if these looks good for you.

Screenshot 2022-02-14 at 10 07 10 PM
GhostyJade commented 2 years ago

The label placement is right, the only suggestion I have is to apply more padding to left to the start adornment, and then it'll look perfect Thanks for your time

harish-everest commented 2 years ago

I have added a little padding. You can override the styles if you want more sophisticated styles.

I will try to refactor this component according to the material-ui API. But it will take a long time to do that.

GhostyJade commented 2 years ago

Thanks so much, when you'll publish on npm I'll test it on our project and I'll give you feedback again

harish-everest commented 2 years ago

Already published a new version

GhostyJade commented 2 years ago

It works, thanks again! c: