diff --git a/CHANGELOG.md b/CHANGELOG.md index 7a3adae1a4f..1993da80d47 100644 --- 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 index d34f5210c31..55e34114b4d 100644 --- 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" > -
- +
@@ -111,24 +102,15 @@ exports[`EuiAccordion behavior opens when clicked once 1`] = ` className="euiAccordion__childWrapper" id="7" > -
- +
diff --git a/src/components/accordion/accordion.tsx b/src/components/accordion/accordion.tsx index 026c0f8322c..139b07a0a94 100644 --- 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}> - - {mutationRef => ( + + {resizeRef => (
{ this.setChildContentRef(ref); - mutationRef(ref); + resizeRef(ref); }}>
{children}
)} -
+ );