Dropdown List Popup Position Shifts When Filtering (Popup Above)

[Tien Pham]

When using the Dropdown List component with filtering enabled, the popup shifts horizontally if it opens above the input.

Demo used:
https://blazor.syncfusion.com/demos/dropdown-list/filtering?theme=fluent2

Initial state (before typing): Popup opens above with left: 323.6px, slightly shifted to the left.

After typing 's': Popup moves to left: 331.2px, now properly aligned with the input field.

Expected:
The popup should remain horizontally aligned with the input field both before and after typing, matching the aligned position after typing.

[Tien Pham]

Init state:https://ibb.co/4wTTfXyH
After search state: https://ibb.co/MxsC5jNH

[YuvanShankar Arunagiri]

Hi Tien,

We validated your scenario with our demo Dropdown list sample browser and encountered the same behavior with the dropdown list and identified that popup collision is not properly calculated in the Sample Browser sample alone, where the body height is 0 and the next element position is absolute. This occurs only with the element structure of Sample Browser and will not be reproduced in local samples.

We have confirmed that this was a behavior which occurs only when the scroller is dynamically created after the DropDownList component has been rendered. Since the position and collision of the popup depend on the relatesTo element (input element), the initial calculations are based on that. This is why the popup may appear slightly misaligned in the Sample browser.

Regards,

YuvanShankar A

Attachment: BlazorAppnet9_93a4ceb9.zip