v3.2.3 - Added 'disableDisplayNone' prop. Updated documentation.'

CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+### v3.2.3
+
+10.11.2023.
+
+**Added**
+
+- Added prop to disable `display: none` when height is set to zero [#16](https://github.com/Stanko/react-animate-height/issues/16).
+
+---
+
 ### v3.2.1, v3.2.2
 
 11.07.2022.

README.md

@@ -188,6 +188,10 @@ const Example = () => {
 
   By default, library will set `aria-hidden` to `true` when height is zero. If you wish to override it, you can pass the prop yourself.
 
+- **disableDisplayNone**: boolean, default: `false`
+
+  By default, library will set `display: none` when height is zero. This prop allows you to disable that behavior and handle it yourself. It is useful when using [auto height](#user-content-animate-height-on-content-change), check [this issue](https://github.com/Stanko/react-animate-height/issues/16) for more info. Please be careful not to break accessibility when using this prop.
+
 Additional props will be passed to the wrapper div, to make adding attrs like `aria-*` easier.
 
 ## Accessibility
@@ -217,12 +221,10 @@ Component checks for `prefers-reduced-motion` on start and disables animations i
 
 ## Animate height on content change
 
-You can achieve this by using [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
-
-Here is an example:
+It is not built in, but you can use `AnimateHeight` and [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to automatically animate height on content change. I created a small example for you here:
 
-- [demo](https://muffinman.io/react-animate-height/#demo-3)
-- [code](./docs/auto-height.tsx)
+- [Source code](./docs/auto-height.tsx)
+- [Demo](https://muffinman.io/react-animate-height/#demo-3)
 
 ## Gotchas
 

docs/auto-height.tsx

@@ -6,13 +6,15 @@ const AutoHeight = ({ children, ...props }) => {
   const contentDiv = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
+    const element = contentDiv.current as HTMLDivElement;
+
     const resizeObserver = new ResizeObserver(() => {
-      setHeight(contentDiv.current.clientHeight);
+      setHeight(element.clientHeight);
     });
 
-    resizeObserver.observe(contentDiv.current);
+    resizeObserver.observe(element);
 
-    return () => resizeObserver.disconnect()
+    return () => resizeObserver.disconnect();
   }, []);
 
   return (
@@ -21,6 +23,7 @@ const AutoHeight = ({ children, ...props }) => {
       height={height}
       contentClassName="auto-content"
       contentRef={contentDiv}
+      disableDisplayNone
     >
       {children}
     </AnimateHeight>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-animate-height",
-  "version": "3.2.2",
+  "version": "3.2.3",
   "description": "Lightweight React component for animating height using CSS transitions.",
   "main": "./dist/cjs/index.cjs",
   "types": "./dist/esm/index.d.ts",

src/index.tsx

@@ -34,10 +34,19 @@ function isPercentage(height: Height) {
   );
 }
 
-function hideContent(element: HTMLDivElement | null, height: Height) {
+function hideContent(
+  element: HTMLDivElement | null,
+  height: Height,
+  disableDisplayNone: boolean
+) {
   // Check for element?.style is added cause this would fail in tests (react-test-renderer)
   // Read more here: https://github.com/Stanko/react-animate-height/issues/17
-  if (height === 0 && element?.style) {
+  if (
+    height === 0 &&
+    !disableDisplayNone &&
+    element?.style &&
+    element?.children.length > 0
+  ) {
     element.style.display = 'none';
   }
 }
@@ -96,6 +105,7 @@ const propsToOmitFromDiv: (keyof AnimateHeightProps)[] = [
   'onHeightAnimationEnd',
   'onHeightAnimationStart',
   'style',
+  'disableDisplayNone',
 ];
 
 // display and height are set by the component itself, therefore ignored
@@ -109,6 +119,7 @@ export interface AnimateHeightProps
   contentClassName?: string;
   contentRef?: React.MutableRefObject<HTMLDivElement | null>;
   delay?: number;
+  disableDisplayNone?: boolean;
   duration?: number;
   easing?: string;
   height: Height;
@@ -129,6 +140,7 @@ const AnimateHeight = React.forwardRef<HTMLDivElement, AnimateHeightProps>(
       className = '',
       contentClassName,
       delay: userDelay = 0,
+      disableDisplayNone = false,
       duration: userDuration = 500,
       easing = 'ease',
       height,
@@ -188,7 +200,7 @@ const AnimateHeight = React.forwardRef<HTMLDivElement, AnimateHeightProps>(
     // ------------------ Did mount
     useEffect(() => {
       // Hide content if height is 0 (to prevent tabbing into it)
-      hideContent(contentElement.current, currentHeight);
+      hideContent(contentElement.current, currentHeight, disableDisplayNone);
 
       // This should be explicitly run only on mount
       // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -296,7 +308,11 @@ const AnimateHeight = React.forwardRef<HTMLDivElement, AnimateHeightProps>(
 
             // ANIMATION ENDS
             // Hide content if height is 0 (to prevent tabbing into it)
-            hideContent(contentElement.current, timeoutHeight);
+            hideContent(
+              contentElement.current,
+              timeoutHeight,
+              disableDisplayNone
+            );
             // Run a callback if it exists
             onHeightAnimationEnd?.(timeoutHeight);
           }, totalDuration);
@@ -316,7 +332,11 @@ const AnimateHeight = React.forwardRef<HTMLDivElement, AnimateHeightProps>(
             // (case when element is empty, therefore height is 0)
             if (height !== 'auto') {
               // Hide content if height is 0 (to prevent tabbing into it)
-              hideContent(contentElement.current, newHeight); // TODO solve newHeight = 0
+              hideContent(
+                contentElement.current,
+                newHeight,
+                disableDisplayNone
+              ); // TODO solve newHeight = 0
             }
             // Run a callback if it exists
             onHeightAnimationEnd?.(newHeight);