Fixes to EuiAccordion adjust exposed height (#3160)

* Changed EuiMutationObserver to EuiResizeObserver Currently working in supported browers * Changed EuiMutationObserver to EuiResizeObserver Currently working in supported browers * Logged in CHANGELOG.md * Removed/modified dependencies * Modified yarn.lock file Co-authored-by: Greg Thompson <thompson.glowe@gmail.com>
elastic · Mar 31, 2020 · 93effed · 93effed
1 parent 31c332b
commit 93effed
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 51 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,10 @@
 - Added `title` and `aria` attributes to `EuiToken`'s icon element ([#3195](https://github.com/elastic/eui/pull/3195))
 - Added new Elasticsearch token types ([58036](https://github.com/elastic/kibana/issues/58036))
 
+**Bug Fixes**
+
+- Fixed bug in `EuiAccordion` to adjust to the correct height when content height changes ([#3160](https://github.com/elastic/eui/pull/3160))
+
 ## [`22.2.0`](https://github.com/elastic/eui/tree/v22.2.0)
 
 - Improved `EuiModal` close button position to prevent from overlapping with the title ([#3176](https://github.com/elastic/eui/pull/3176))

diff --git a/src/components/accordion/__snapshots__/accordion.test.tsx.snap b/src/components/accordion/__snapshots__/accordion.test.tsx.snap
@@ -44,24 +44,15 @@ exports[`EuiAccordion behavior closes when clicked twice 1`] = `
  className="euiAccordion__childWrapper"
  id="8"
  >
- <EuiMutationObserver
- observerOptions={
- Object {
- "attributeFilter": Array [
- "style",
- ],
- "childList": true,
- "subtree": true,
- }
- }
- onMutation={[Function]}
+ <EuiResizeObserver
+ onResize={[Function]}
  >
  <div>
  <div
  className=""
  />
  </div>
- </EuiMutationObserver>
+ </EuiResizeObserver>
  </div>
  </div>
 </EuiAccordion>
@@ -111,24 +102,15 @@ exports[`EuiAccordion behavior opens when clicked once 1`] = `
  className="euiAccordion__childWrapper"
  id="7"
  >
- <EuiMutationObserver
- observerOptions={
- Object {
- "attributeFilter": Array [
- "style",
- ],
- "childList": true,
- "subtree": true,
- }
- }
- onMutation={[Function]}
+ <EuiResizeObserver
+ onResize={[Function]}
  >
  <div>
  <div
  className=""
  />
  </div>
- </EuiMutationObserver>
+ </EuiResizeObserver>
  </div>
  </div>
 </EuiAccordion>

diff --git a/src/components/accordion/accordion.tsx b/src/components/accordion/accordion.tsx
@@ -4,10 +4,7 @@ import classNames from 'classnames';
 import { CommonProps, keysOf } from '../common';
 
 import { EuiIcon } from '../icon';
-import { EuiMutationObserver } from '../observer/mutation_observer';
-import { getDurationAndPerformOnFrame } from '../../services';
-
-const MUTATION_ATTRIBUTE_FILTER = ['style'];
+import { EuiResizeObserver } from '../observer/resize_observer';
 
 const paddingSizeToClassNameMap = {
  none: '',
@@ -87,19 +84,6 @@ export class EuiAccordion extends Component<
  });
  };
 
- onMutation = (records: MutationRecord[]) => {
- const isChildStyleMutation = records.find((record: MutationRecord) => {
- return record.attributeName
- ? MUTATION_ATTRIBUTE_FILTER.indexOf(record.attributeName) > -1
- : false;
- });
- if (isChildStyleMutation) {
- getDurationAndPerformOnFrame(records, this.setChildContentHeight);
- } else {
- this.setChildContentHeight();
- }
- };
-
  componentDidMount() {
  this.setChildContentHeight();
  }
@@ -207,23 +191,17 @@ export class EuiAccordion extends Component<
  this.childWrapper = node;
  }}
  id={id}>
- <EuiMutationObserver
- observerOptions={{
- childList: true,
- subtree: true,
- attributeFilter: MUTATION_ATTRIBUTE_FILTER,
- }}
- onMutation={this.onMutation}>
- {mutationRef => (
+ <EuiResizeObserver onResize={this.setChildContentHeight}>
+ {resizeRef => (
  <div
  ref={ref => {
  this.setChildContentRef(ref);
- mutationRef(ref);
+ resizeRef(ref);
  }}>
  <div className={paddingClass}>{children}</div>
  </div>
  )}
- </EuiMutationObserver>
+ </EuiResizeObserver>
  </div>
  </div>
  );