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

[BUG] Menu shadow clipped #208

Closed
2 of 6 tasks
lexanth opened this issue Oct 27, 2022 · 3 comments · Fixed by #209
Closed
2 of 6 tasks

[BUG] Menu shadow clipped #208

lexanth opened this issue Oct 27, 2022 · 3 comments · Fixed by #209
Assignees
Labels
Bug Something isn't working

Comments

@lexanth
Copy link

lexanth commented Oct 27, 2022

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 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).

chakra-react-select Version

4.3.0

Link to Reproduction

https://codesandbox.io/s/nostalgic-perlman-t0to4g?file=/src/App.js

TypeScript?

  • Yes I use TypeScript

Steps to reproduce

Open codesandbox
Look for the shadow - there is none

Operating System

  • macOS
  • Windows
  • Linux
  • iOS/iPadOS
  • Android

Additional Information

No response

@lexanth lexanth added the Bug Something isn't working label Oct 27, 2022
@csandman
Copy link
Owner

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:

const chakraStyles = {
  menu: (provided, state) => {
    console.log(state.selectProps.size)
    return provided;
  }
}

@csandman
Copy link
Owner

This has been fixed in v4.4.0, if you still have any problem let me know!

Here's a functional example: https://codesandbox.io/s/ogopcn?file=/example.js

@lexanth
Copy link
Author

lexanth commented Oct 28, 2022

Thanks - looks good to me!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants