ElemeFE / ElemeFE/element-react
Overflow: hidden is always on in Collapse element
- Dominant language
- JavaScript
- Stars
- 2.8k
- Forks
- 435
- PR merge metrics
- No merged PRs in 30d
Description
When you eg. try to put a select inside a Collapse, this happens:

There are two divs in Collapse that have overflow: hidden set . When you override them via css, everything seems to be working correctly except for collapse/opening animation. The main problem is with the outside div, which is the main element of this component: https://github.com/ElemeFE/element-react/blob/master/libs/collapse/index.jsx
It seems that originally it had overflow: hidden set as a part of collapsing/ hiding animation, see :
https://github.com/ElemeFE/element-react/blob/09688fe5cc5fd837815f860e6f83cdf1dd7ef12a/libs/collapse/index.jsx#L94
https://github.com/ElemeFE/element-react/blob/09688fe5cc5fd837815f860e6f83cdf1dd7ef12a/libs/collapse/index.jsx#L72
and unset after the animation is complete:
https://github.com/ElemeFE/element-react/blob/09688fe5cc5fd837815f860e6f83cdf1dd7ef12a/libs/collapse/index.jsx#L113
https://github.com/ElemeFE/element-react/blob/09688fe5cc5fd837815f860e6f83cdf1dd7ef12a/libs/collapse/index.jsx#L81
Unfortunately, later overflow: hidden was hardcoded for whole element, see:
https://github.com/ElemeFE/element-react/blob/09688fe5cc5fd837815f860e6f83cdf1dd7ef12a/libs/collapse/index.jsx#L122
WIthout this hardcoding, overiding the other overflow: hidden (set as part of el-collapse-item__wrap) would remove the issue with select dropdown being cut off, because the outside div would only remove overflow during animation (which produces desired animation effect).
Could line 122 be removed?
Contributor guide
Assessment
This issue has not been assessed yet.