Provide focus style customization

[chris-verclytte]

Hello,

What would you think about adding some way to customize the focus state of the component ?
I have not found any hook that would allow to do this currently.
What I am willing to do is applying a common border for both country selector and phone input but currently when you focus phone input, only this one is focused and there is no way to hook on a CSS className or other mechanism to customize this.
Here is a preview of what I get:

I think the easier way would be to put a 'react-phone-number-input--focused' className on the root component (here), this would allow to apply focus state on both country selector and phone input.
Another solution would be to provide ref hooks for input and select but I think this is trickier.

What do you think ? I can do a PR if this seems legit.

[catamphetamine]

Try setting position: absolute for country select and then move it to the left side of the <input/> and add padding-left to the <input/>.

[chris-verclytte]

Yeah sure, it would be possible to do it CSS-way, but I think this could belong to the library as it is pretty common case. Here the country selector is like an adornment on an input field, then I think it makes sense to say that the whole component is focused (with the className) when the phone input is focused, isn't it ?

[catamphetamine]

Released react-phone-number-input@2.2.9