As a noobie, I have ReactSelect as a defalut component and I'm having troble implemnting a floating label with chakra-ui as it is demonstrated here.
Tryed to add a className="identifier" so themecan find my component. It kind of worked using extendTheme over component/index.
'input:not(:placeholder-shown) + label, .identifier:not(:placeholder-shown) + label...
Happens that label its always active, floating top left and not transitioning back center when there is no option is selected.
If you remove imput from identifier "input:not(:placeholder-shown) + label, .identifier:not(:placeholder-shown) + label...
Oposit behavior. Same doen't happen with date or text imput.
Anys sugestions?
1 Answer
I had your same problem. I found that exist this package: created to make it easier to use the full power of react-select in a chackra-ui react environment.
Here the steps to solve the issue using this package:
In the git issue they use CreatableSelect, but I tested that works with normal Select too (from chakra-react-select package)
