You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When I open the menu, I expect it to have a shadow.
When I change the shadow for the menu, I expect it to be visible (e.g. setting boxShadow: 'lg' in the styles for menuList)
The CSS to create the shadow is there (on the menuList), but the shadow is clipped because the menu has overflow: hidden.
It looks like this CSS was introduced in b0d49ab to solve an issue with rounded corners. I'm not sure if that issue still requires the overflow: hidden - I still see nicely rounded borders if I remove the overflow: hidden in devtools. Might just be an issue when the menu list gets long?
We can also disable the shadow on the menuList and apply the shadow to the menu. Then we also need to match the border radius from the menuList, which is tricky because (AFAIK) the chakraStyles callbacks don't get the size prop, nor can we use hooks there to access Input styles. We could probably work around this with a complete custom Menu component, but it seems like a bug to me that the shadow doesn't show up (given that it is being requested in CSS).
Thanks for pointing this out, I'm not sure how this went unnoticed for so long. Even the default MenuList styling has a small shadow that's being cut off. I guess the shadow was small enough that I didn't notice that it was missing.
And you're right, I believe the overflow: hidden on the Menu no longer needs to be there. I think that was a holdover from when the menu list styles were on the menu component instead of the menu list. I'm actually not sure what it was there for anymore, its been so long haha. I'll get an updated version removing that up today.
As a side note, you can actually access the size prop (and any other prop on the select) from within chakraStyles. All of them are available in the second variable (state) in the style functions under selectProps. Here's an example:
Description
When I open the menu, I expect it to have a shadow.
When I change the shadow for the menu, I expect it to be visible (e.g. setting
boxShadow: 'lg'
in the styles formenuList
)The CSS to create the shadow is there (on the menuList), but the shadow is clipped because the menu has
overflow: hidden
.It looks like this CSS was introduced in b0d49ab to solve an issue with rounded corners. I'm not sure if that issue still requires the
overflow: hidden
- I still see nicely rounded borders if I remove the overflow: hidden in devtools. Might just be an issue when the menu list gets long?We can also disable the shadow on the menuList and apply the shadow to the menu. Then we also need to match the border radius from the menuList, which is tricky because (AFAIK) the
chakraStyles
callbacks don't get the size prop, nor can we use hooks there to accessInput
styles. We could probably work around this with a complete customMenu
component, but it seems like a bug to me that the shadow doesn't show up (given that it is being requested in CSS).chakra-react-select Version
4.3.0
Link to Reproduction
https://codesandbox.io/s/nostalgic-perlman-t0to4g?file=/src/App.js
TypeScript?
Steps to reproduce
Open codesandbox
Look for the shadow - there is none
Operating System
Additional Information
No response
The text was updated successfully, but these errors were encountered: