Accordion needs a height calculation on mount #816
Conversation
|
Also took the time to make the focus state look a bit better. |
| setChildContentHeight = () => { | ||
| requestAnimationFrame(() => { | ||
| const height = this.state.isOpen ? this.childContent.clientHeight: 0; | ||
| this.childWrapper.setAttribute('style', `height: ${height}px`); |
There was a problem hiding this comment.
Is there a specific reason why we're using setAttribute here instead of setting the height to the state and set it to the style attribute in the render function?
There was a problem hiding this comment.
Been awhile since I originally wrote this one. Usually I would have written this with state so I'm guessing I did it for a speed reason or the animation got hitched. I've found with animations like these sometimes state can be slow. For example, I need the animationFrame because it couldn't grab the height fast enough.
There was a problem hiding this comment.
Sounds fair. I would btw recommend using el.style.height = ... instead of setAttribute, since it's a) working more stable across all browsers and b) would not destroy any potential other styles set on the same element.
Fixes #805
Makes sure that the child content of an accordion gets a height if its set to be initially open.
cc @ppisljar and @timroes who ran into this issue in elastic/kibana#18579