-
Notifications
You must be signed in to change notification settings - Fork 6.8k
Description
Is this a regression?
- Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was
19.2.19
Description
After Angular Material v20, the mat-mdc-autocomplete-panel default positioning changed from position: static to position: relative.
PR
This change breaks the layout of nested elements that use position: absolute with positioning relative to the autocomplete panel's parent container. Previously, nested absolutely-positioned elements (like a side list) would render outside the autocomplete panel. Now they render constrained within it.
Questions:
- Was this intended?
- Should I change the implementation of nested list to adapt to it? It can be fixed via updating the global styling to position: static again
Reproduction
StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-gbhzljrw?file=src%2Fmain.ts
Steps to reproduce:
- Open the list, check the secondary list is rendered inside the autocomplete
- Switch between position relative and static, the list is rendered outside the autocomplete (static)
Expected Behavior
Nested elements with position: absolute should render outside the autocomplete panel's bounds, positioned relative to the nearest non-static ancestor (the panel's parent container) instead of .cdk-overlay-pane, allowing side-by-side layouts as originally designed.
Actual Behavior
Nested elements with position: absolute now render inside the autocomplete panel's bounds because position: relative on the panel creates a new stacking context, constraining absolute positioning to the panel itself rather than .cdk-overlay-pane.
Environment
- Angular: 21.1.0
- CDK/Material: 21.1.5
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): Windows 11