p-dropdown: Panel not positioned correctly under some specific filter circumstances

[antonio-cordoba]

Describe the bug

I have a dropdown with these specific characteristics:

• The panel is styled to fit content.
• My host component has key event handler to filter options when an alpha key is pressed.
• The filter is a 'starts with' and it resets at every keystroke.
• My options have labels with significantly different lengths. When a panel is displayed, it gets positioned correctly based on the available space around the dropdown and the size of the panel. It can be above or below the dropdown, and it may extend to the right or the left based on how close it is to the edge. All this is great! However, when the panel is shown extending to the left and we use the keyboard to filter a subset of shorter description options, the panel gets re-sized but not re-positioned, resulting in a panel that is far from its dropdown as shown in this screen capture.

Environment

Our internal application has a page with multiple instances of these dropdowns.
The layout of the page is data driven so we have multiple layouts where at times there are only a few dropdowns and most time we have a more significant amount of these. The page where these dropdowns are used has other information the users need on the screen so it is important for users to see the options close to the specific dropdown they are working with. Our users for the most prefer to work with the keyboard.

Reproducer

https://stackblitz.com/edit/dropdown-panel-sample?file=src%2Fcomponents%2Fapp-component.html

Angular version

18.0.0

PrimeNG version

17.18.4

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

22.3.0

Browser(s)

Chrome 126

Steps to reproduce the behavior

Please see stackblitz sample above.
Two steps:

1. Display the panel with the mouse.
2. Press letter 'o' on the keyboard to filter the options on the panel with shorter labels.

Expected behavior

After re-size, panel should re-position close to the dropdown according to current rules (below the dropdown if possible, otherwise above; extend to the right if possible, otherwise to the left.

[antonio-cordoba]

While playing with the stackblitz I did find a workaround... Make a call to pDropdown?.overlayViewChild?.alignOverlay() on a timeout right after setting the filter. That seems to do the half of the trick, but there are still issues. The main issue with the workaround is that although the overlay now repositions after setting the filter, it still doesn't reposition back after clearing the filter (pressing any non-alpha key like Shift or Backspace) See update on the stackblitz reproducer I still believe this should be done internally at the PrimeNG component, not by workarounds of the component consumers.