Fixes to EuiAccordion adjust exposed height

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))

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>

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>
     );