bug(Overlay): FlexibleConnectedPositionStrategy withViewportMargin not working
- Langage dominant
- TypeScript
- Étoiles
- 25k
- Forks
- 6.8k
- Merge moyen
- 1 j 8 h
- PR mergées (30 j)
- 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
Guide de contribution
Ouvrir le guide de contribution
Piste de recherche
Commencez par la reproduction StackBlitz liée et examinez FlexibleConnectedPositionStrategy, en vous concentrant sur la manière dont withViewportMargin interagit avec les dimensions flexibles désactivées et le comportement de push. Le travail est terminé lorsque l’overlay bascule vers la deuxième position si la première enfreint la marge de viewport de 100px, avec une couverture pour la configuration signalée.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- angular, typescript
- Domaine
- frontend
- Type d'issue
- Bug
- Difficulté
- 3/5
- Temps estimé
- 1-2 jours
- Activité
- À l'abandon
- Clarté
- Plutôt claire
- Accessibilité débutants
- 35/100