How to set up animations when using 'forceMount' on Accordion?

[PhilBookst]

Hey Radix Team,

I'm currently struggling with the forceMount prop on the Accordion primitive. I need to use it to mount the content on the page for seo purposes but it's messing up my css animations. When using forceMount the content is open by default, but I need it to be in a closed state/visually hidden. Just like it would behave if it wasn't set.

I've tried playing around with height and visibility, but it just messed up my animations...

Can anybody show me an example on how to achieve this?

Codesandbox link with forceMount set:
https://codesandbox.io/s/great-lumiere-oqt590?file=/App.js

[andy-hook]

Hi @PhilBookst,

The purpose of forceMount is to hand over lifecycle to javascript animation libraries and so our built in animation handling doesn’t support this type of use.

It's on our radar to provide additional mount options for cases like this but at the moment it’s not something we support via forceMount i'm afraid.

[ignacio-fm]

I see an accessibility error due to how search engine robots work, since they cannot correctly read the DOM that the user can access, generating poor internal link building to the pages that are using this component (and others like Navegation Menu #1273), there should be a way for Radix not to remove the content of hidden sections, like Stripe.com does for example on its Homepage. What do you think about it?

[PhilBookst]

I found an ugly little workaround in case anybody else has the same problem:

export const MyAccordionItem = ( ) => {
  const contentRef = useRef<HTMLDivElement | null>(null);
  let removedStyle = false;

  useEffect(() => {
    const { current: elem } = contentRef;
    if (!elem) return;

    if (elem.dataset["state"] === "closed") {
      elem.style.height = "0px";
    }
  }, []);

  const showElement = useCallback(() => {
    const { current: elem } = contentRef;
    if (!elem) return;
    if (removedStyle) return;

    elem.style.height = "unset";
    removedStyle = true;
  }, []);

  return (
    <AccordionItem value="value">
      <Accordion.Header asChild>
        <Accordion.Trigger onClick={showElement}>
           trigger
        </Accordion.Trigger>
      </Accordion.Header>
      <AccordionContent forceMount ref={contentRef}>
        hello there
    </AccordionItem>
  );
};

[benjick]

Kinda works with group:

<Accordion type="single" collapsible className="w-full">
  <AccordionItem value="item-1" className="group border-0">
    <AccordionTrigger>{title}</AccordionTrigger>
    <AccordionContent
      forceMount
      className="group-data-[state=closed]:hidden"
    >
      {children}
    </AccordionContent>
  </AccordionItem>
</Accordion>

[bartkownacki]

For me previous answers were blocking and breaking animations.
This is what worked for me as a workaround:

export const AccordionContent = ({
  children,
}) => {
  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 (
    <Content ref={contentRef} forceMount>
      <div ref={ref}>{children}</div>
    </Content>
  );
};

[fabiancgc12]

I found a solution with pure css, you can check my comment here #1155 (comment)

[johnstack94]

Shadcn as base using ResizeObserver and react-merge-refs

const AccordionContent = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
>(({ className, children, ...props }, forwardedRef) => {
  const contentRef = React.useRef<HTMLDivElement>(null);
  const [height, setHeight] = React.useState<string>("0px");
  const [isOpen, setIsOpen] = React.useState(false);

  const localRef = React.useRef<HTMLElement>(null);

  const setRefs = React.useCallback(mergeRefs([localRef, forwardedRef]), [
    forwardedRef,
  ]);

  React.useEffect(() => {
    const element = localRef.current;
    if (!element) return;

    const handleStateChange = () => {
      const isOpenState = element.getAttribute("data-state") === "open";
      setIsOpen(isOpenState);
      if (isOpenState && contentRef.current) {
        setHeight(`${contentRef.current.scrollHeight}px`);
      } else {
        setHeight("0px");
      }
    };

    handleStateChange();

    const observer = new MutationObserver(handleStateChange);
    observer.observe(element, {
      attributes: true,
      attributeFilter: ["data-state"],
    });

    return () => {
      observer.disconnect();
    };
  }, []);

  return (
    <AccordionPrimitive.Content
      ref={setRefs}
      forceMount
      className={cn("overflow-hidden transition-all duration-300", className)}
      style={{
        maxHeight: isOpen ? height : "0px",
        opacity: isOpen ? 1 : 0,
      }}
      {...props}
    >
      <div ref={contentRef} className="pb-4 pt-0">
        {children}
      </div>
    </AccordionPrimitive.Content>
  );
});
AccordionContent.displayName = AccordionPrimitive.Content.displayName;

[matheusfernd]

It helped a lot!