Speed Dial: Invisible overlay hangs below element

[horizoncarlo]

Describe the bug

I have a 64px Speed Dial, but there is an extra 36px of invisible overlay below the Speed Dial, which blocks mouse events from being passed through to elements underneath. The overlay seems to be part of the flex layout, and appears in whatever direction your Speed Dial is set to (in my case direction="down", with type="linear").

The same behaviour is evident when inspecting the PrimeNG component suite itself.

Environment

Seen in PrimeNG 16 and 17 (with Angular versions to match) on Chrome v120 on desktop Linux.

Reproducer

No response

Angular version

16, 17

PrimeNG version

16, 17

Build / Runtime

TypeScript

Language

TypeScript

Node version (for AoT issues node --version)

18

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

I would expect Speed Dial to maintain it's specified height (in this case 64px) without any overhang/overlay that blocks clicks.

[cetincakiroglu]

Hi,

It's not the overlay, it's the menu items list of the component. It happens because the angular animations don't work with display: none, it breaks the animation. Due to the technical limitations, we're not able to modify the animation in this way. We're planning to replace angular animations with our custom CSS animations in the future, which will solve the issue.

[horizoncarlo]

Unfortunate limitation. Any timeline on a projected fix?