add MutationObserver to accordion to trigger setChildContentHeight when children change#947
Conversation
…en children change
cchaos
left a comment
cchaos
left a comment
There was a problem hiding this comment.
Works for me in Chrome and IE.
| componentDidMount() { | ||
| this.setChildContentHeight(); | ||
|
|
||
| requestAnimationFrame(() => { |
There was a problem hiding this comment.
Did you test this without requestAnimationFrame? I don't think it needs the delay.
… add comment to change log
| this.setChildContentHeight(); | ||
|
|
||
| this.observer = new MutationObserver(this.setChildContentHeight); | ||
| this.observer.observe(this.childContent, { childList: true, subtree: true }); |
There was a problem hiding this comment.
Last thing, sorry for not catching this before.
If this.childContent changes to a new ref before componentWillUnmount is called the new content isn't tracked. This observer creation should be moved to where this.childContent is set (currently an inline arrow function, that will need to be promoted to a method on the component class). The ref setting function should check if the incoming ref is null or not; if this.observer exists, disconnect; then if ref is not null, create new observer.
The setRef method will be called with null on unmount, so there is no need to keep componentWIllUnmount
chandlerprall
left a comment
chandlerprall
left a comment
There was a problem hiding this comment.
LGTM; pulled & tested example which works as expected
|
jenkins, test this |
commit 2eea143 Author: cchaos <caroline.horn@elastic.co> Date: Thu Jun 28 12:56:56 2018 -0400 Get rid of terrible IE highlight when select is focused commit 66647f0 Author: cchaos <caroline.horn@elastic.co> Date: Thu Jun 28 12:07:54 2018 -0400 Revert commit of filter_button.scss commit c2e8a73 Author: cchaos <caroline.horn@elastic.co> Date: Thu Jun 28 12:00:54 2018 -0400 Simplifying form control styles - Made bottom colored border from linear-gradient - Allowing parameters to determine if just the borders should render - Allowing parameters to determine if all state styles should be added - Fixing variable naming schemes commit c5f0ab5 Author: Stacey Gammon <gammon@elastic.co> Date: Thu Jun 28 10:02:16 2018 -0400 add inspect to typedef file (elastic#952) * add inpsect to typedef file * use the right pr number commit c64f055 Author: Nathan Reese <reese.nathan@gmail.com> Date: Wed Jun 27 08:52:41 2018 -0600 add MutationObserver to accordion to trigger setChildContentHeight when children change (elastic#947) * add MutationObserver to accordion to trigger setChildContentHeight when children change * remove requestAnimationFrame around MutationObserver registration and add comment to change log * set up observer in ref creation function * mock MutationObserver
4 participants
EuiAccordion does not update height when children internal state changes. I updated the AccordionGrow example to demonstrate. When the counter is modified inside the sub-component than EuiAccordion's componentDidUpdate never gets called because none of the props passed to children changed.
This PR adds a MutationObserver to update height any time the children DOM tree changes.