bug(Overlay): FlexibleConnectedPositionStrategy withViewportMargin not working
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
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
_No response_
### Description
When using overlay with `FlexibleConnectedPositionStrategy` and `withViewportMargin()`, overlay ignores provided margin value and still opens in first preffered position, when it should move to second one. Overlay cant be pushed and has no flexible dimmensions set.

### Reproduction
https://stackblitz.com/edit/viewport-margin-bug?file=src%2Fapp%2Fapp.component.ts
(Red line shows 100px margin edge)
Steps to reproduce:
1. Create overlay with popup 100px x 100px
2. Locate its origin point 150px from top edge of viewport.
3. Add two positions to FlexibleConnectedPositionStrategy:
```
{
originX: 'end',
originY: 'top',
overlayX: 'start',
overlayY: 'bottom',
},
{
originX: 'end',
originY: 'bottom',
overlayX: 'start',
overlayY: 'top',
},
```
4. Use `withViewportMargin(100)`.
5. Use `withFlexibleDimensions(false)`
6. Use `withPush(false)`
### Expected Behavior
Since `withViewPortMargin(100)` was set, and overlay cannot be pushed or shrinked, then it should fallback to second preffered position in which popup opens downwards.
```
{
originX: 'end',
originY: 'bottom',
overlayX: 'start',
overlayY: 'top',
},
```
### Actual Behavior
Overlay still opens according to first position which is upward, ignoring viewport margin
### Environment
- Angular: 13.1.3
- CDK/Material: 13.1.3
- Browser(s): Chrome 97
- Operating System (e.g. Windows, macOS, Ubuntu): macOS
Contributor guide
Research direction
Start with the linked StackBlitz reproduction and inspect FlexibleConnectedPositionStrategy, focusing on how withViewportMargin interacts with disabled flexible dimensions and push behavior. Done means the overlay falls back to the second position when the first violates the 100px viewport margin, with coverage for the reported configuration.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100