Collapse animation hides overflow

🐛 Bug report

Elements wrapped in Collapse animation can’t overflow it. It causes problems for dropdowns.

💥 Steps to reproduce

1. Go to https://codesandbox.io/s/eager-tereshkova-fr0mr
2. Click on ‘Click Me’
3. Open Dropdown
4. Options should be clipped
5. Click on ‘Toggle Theme’
6. Options should not be clipped

💻 Link to reproduction

https://codesandbox.io/s/eager-tereshkova-fr0mr

🧐 Expected behavior

Collapse should allow overflow.

🧭 Possible Solution

Workaround is provided in Codesandbox. For a actual solution, I think that removing overflow: hidden from here would do. I can provide PR if that’s okay.

🌍 System information

Software	Version(s)
Chakra UI	1.0.0
Browser	Chrome 87
Operating System	Win 10

[frysztak]

@dusty best I came up with is this hack:

// theme.ts
const styles = {
  global: {
    ':not(.chakra-dont-set-collapse) > .chakra-collapse': {
      overflow: 'initial !important',
    },
  },
};

export const theme = extendTheme({
  styles,
  ...
});

by default, it sets overflow: initial !important so that overflow is visible. sometimes that’s not what you want. you can then set className="chakra-dont-set-collapse"

[Inviz]

.chakra-collapse[style*="height: auto"] { overflow: initial !important }