Set "display: none" when height is 0

[apers]

Would it be possible to set "display: none" when height is 0 so the content doesn't take tab focus when hidden?

[Stanko]

Hello @apers, Recently I stumbled upon the same problem, I'll release new version today or tomorrow. Cheers!

[Stanko]

@apers I just released version 0.9.10 Can you please test and close the issue if it works, thanks!

Commit: https://github.com/Stanko/react-animate-height/commit/e52a3b9098e37b4bf4ddd7ce46022643de41156f

[apers]

That was quick! Tested and working, thanks!

[nizioleque]

@Stanko I think this functionality is breaking something else - it is causing animating from 0 to another value (using ResizeObserver) to not work.

This is what's happening, if I understand correctly:

• I render AnimateHeight with height={x} where x is the contentHeight from a div observed with the ResizeObserver API - initially the observed div is empty so x is 0
• the content div gets display: none (because of this feature, I guess)
• then I add contents to the observed div, but because it's inside a container with display: none the browser doesn't calculate the size - the contentHeight of my observed div is still 0
• the animation is not working because x is still 0

Could you please let us disable this feature or find another way to fix the tab focus issue without display: none?

Here's a workaround I came up with:

• I set contentClassName='rah-content' on the AnimateHeight component
• I add the following CSS: .rah-content { display: block !important; }

[tuff]

@Stanko I'd also like to request that the display: none behaviour be opened to configuration.

I would like elements within zero-height containers to be able to receive focus, so that the user can tab to them and have the container be automatically expanded. I can also see where and why a developer would not want hidden elements to be focusable - both options are useful.

Currently I am using a similar !important workaround as @nizioleque, which seems brittle.

[Stanko]

hey, it is a valid point. I'll try to add it today or during the weekend.

[Stanko]

I just published v3.2.3 with a new disableDisplayNone prop.

I added an additional check - when height is zero and there is no children elements, display: none won't be applied.

Hope this helps, cheers!