[Accordion] Is there a way to force accordion content height re-calculation after new DOM is added?

[aslauris]

I've got a dynamic form inside <Accordion.Content /> where new rows/items could be added. However, <Accordion.Content /> height is not updated after new DOM elements are added resulting in new rows being invisible. Is there any way to force accordion content height re-calculation or any other workaround to this? Many thanks!

[benoitgrelard]

I believe this is something you would have to deal with yourself in this specific case.

[dschlabach]

Hey! Find a solution for this? @aslauris

[Fabricevladimir]

Did you? 🙈

[dschlabach]

No 😭 , ended up doing something different entirely

[Fabricevladimir]

I ended up passing forceMount to the content. It works...most of time!

[aslauris]

Hi @dschlabach sorry for delay - haven't noticed your question. Actually, I ended up with a solution with no accordion as well ;)

[bipinmv]

Haven't got a solution yet? Here is a workaround for you.

The CSS variable --radix-accordion-content-height doesn't get updated when the elements inside AccordionContent changes.
We need to add a resize observer to update the value.

import * as Accordion from '@radix-ui/react-accordion';

export const Content = ({ children}: { children: ReactNode }) => {
  const ref = useRef(null);
  const contentRef = useRef(null);

  // Radix Accordion doesnt update height when children updates.
  // We need to manualy add a resize observer on children of the Content component
  // to update the CSS variable height of the content.

  useEffect(() => {
    const content = contentRef.current;

    if (!ref.current || !content) return;

    const resizeObserver = new ResizeObserver(() => {
      const currentHeight = ref.current.clientHeight;

      content.style.cssText = `--radix-accordion-content-height: ${currentHeight}px;`;
    });

    resizeObserver.observe(ref.current);

    return () => resizeObserver.disconnect(); // clean up
  }, []);

  return (
    <Accordion.Content ref={contentRef}>
      <div ref={ref}>{children}</div>
    </Accordion.Content>
  );
};