diff --git a/src/mantine-core/src/Spoiler/Spoiler.story.tsx b/src/mantine-core/src/Spoiler/Spoiler.story.tsx
index 989f721e007..7be5bc54dca 100644
--- a/src/mantine-core/src/Spoiler/Spoiler.story.tsx
+++ b/src/mantine-core/src/Spoiler/Spoiler.story.tsx
@@ -1,4 +1,5 @@
import React, { useState } from 'react';
+import { Accordion } from '../Accordion/Accordion';
import { Spoiler } from './Spoiler';
export default { title: 'Spoiler' };
@@ -27,3 +28,26 @@ export function ContentChanges() {
);
}
+
+export function InsideAccordion() {
+ return (
+
+
+
+ Expand me
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut quam vitae
+ lorem viverra ultricies. Integer hendrerit, quam mollis tempus iaculis, tellus est
+ pellentesque eros, vel molestie risus eros sit amet sem. Fusce pretium ex quis neque
+ fringilla facilisis. Aenean sed luctus tortor, eget suscipit neque. Pellentesque
+ consequat neque quis porta luctus. Donec vitae est id velit condimentum mollis id vel
+ est. Sed eleifend interdum enim, a facilisis ex faucibus nec. Morbi vel est et mauris
+ congue ullamcorper. Duis eget velit lacinia, consequat neque vel, dignissim massa.
+
+
+
+
+
+ );
+}
diff --git a/src/mantine-core/src/Spoiler/Spoiler.tsx b/src/mantine-core/src/Spoiler/Spoiler.tsx
index 5179f055552..f30b4ccd238 100644
--- a/src/mantine-core/src/Spoiler/Spoiler.tsx
+++ b/src/mantine-core/src/Spoiler/Spoiler.tsx
@@ -1,5 +1,6 @@
-import React, { useRef, useState, useEffect, forwardRef } from 'react';
+import React, { useState, useEffect, forwardRef } from 'react';
import { DefaultProps, Selectors, useComponentDefaultProps } from '@mantine/styles';
+import { useElementSize } from '@mantine/hooks';
import { Anchor } from '../Anchor';
import { Box } from '../Box';
import useStyles, { SpoilerStylesParams } from './Spoiler.styles';
@@ -57,24 +58,20 @@ export const Spoiler = forwardRef((props, ref) =>
const [show, setShowState] = useState(initialState);
const [spoiler, setSpoilerState] = useState(initialState);
- const [contentHeight, setContentHeight] = useState(null);
- const contentRef = useRef(null);
+ const { ref: contentRef, height } = useElementSize();
const spoilerMoreContent = show ? hideLabel : showLabel;
useEffect(() => {
- if (contentRef.current) {
- setSpoilerState(maxHeight < contentRef.current.offsetHeight);
- setContentHeight(contentRef.current.offsetHeight);
- }
- }, [maxHeight, children]);
+ setSpoilerState(maxHeight < height);
+ }, [height, maxHeight, children]);
return (