overflow hidden stays applied after

[theskillwithin]

Code example
https://stackblitz.com/edit/vitejs-vite-avkgx3?file=src%2FApp.tsx

Expected behavior
"While it is animating, component has overflow: hidden. When the animation is finished and height is set to "auto", overflow: hidden is removed." (https://www.npmjs.com/package/react-animate-height)

Steps to Reproduce (for bugs)
after toggling see html:

<div aria-hidden="false" class="rah-static rah-static--height-specific " style="height: 588px;overflow: hidden;">

overflow hidden is still applied

[Stanko]

Hey, I've tried your example, but it works fine for me. Maybe there is something else interfering with the animation on your machine.

Firefox

firefox.mp4

Chrome

chrome.mp4

[theskillwithin]

@Stanko you can see when the toggle is open, the overflow hidden is still applied in this example

[theskillwithin]

[theskillwithin]

[Stanko]

I think I understand what you are taking about.

In your initial comment, you pasted this HTML

<div aria-hidden="false" class="rah-static rah-static--height-specific " style="height: 588px;overflow: hidden;">

From the rah-static--height-specific class, I see you are animating to the specific height. In that case, overflow: hidden has to be applied all the time. Like it says in the documentation, it is removed only when height is set to "auto".

When the animation is finished and height is set to "auto", overflow: hidden is removed.

So, I think the library behaves as intended, but feel free to suggest changes of the readme if we need to make it more clear.

I hope this helps.

[Stanko]

And in both of your screenshots, height is set to 0, so the component needs overflow hidden again.

[theskillwithin]

oh dang, i think it might be how i am using is wrong

import { useEffect, useRef, useState } from "react";
import AnimateHeight, { type AnimateHeightProps, type Height } from "react-animate-height";

const AutoHeight = (props: AnimateHeightProps) => {
  const [height, setHeight] = useState<Height>("auto");
  const contentDiv = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    const element = contentDiv.current as HTMLDivElement;

    const resizeObserver = new ResizeObserver(() => {
      setHeight(element.clientHeight);
    });

    resizeObserver.observe(element);

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

  return (
    <AnimateHeight
      {...props}
      height={height}
      contentClassName="auto-content"
      contentRef={contentDiv}
      disableDisplayNone
    >
      {props.children}
    </AnimateHeight>
  );
};

export { AutoHeight };

[theskillwithin]

@Stanko fixed the example https://stackblitz.com/edit/vitejs-vite-wnbb37pk?file=src%2FAuthHeight.tsx,src%2FApp.tsx

i needed to do a Animate height on content change example

this shows the problem i am having where overflow is hidden still

[Stanko]

That is expected behavior, as for the AutoHeight, in order to animate when content changes the wrapper has to have a fixed height. EDIT - it never sets height to "auto", therefore the overflow property is never reset. You'll see the same behavior in the demo too:
https://muffinman.io/react-animate-height/#demo-3

EDIT2: Just to be clear, if overflow was set to auto, when content changes, no animation would happen.

AutoHeight is just a "recipe" for one of the common feature requests that are out of the scope of the library. If you manage to find another solution, I'll gladly add it to the readme.