bug(Overlay): FlexibleConnectedPositionStrategy withViewportMargin not working
- 主要言語
- TypeScript
- スター
- 25k
- フォーク
- 6.8k
- 平均マージ
- 1日 8時間
- マージ済み PR(30日)
- 91
説明
### 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
コントリビューションガイド
調査の方向性
リンク先の StackBlitz の再現コードから始めて FlexibleConnectedPositionStrategy を調査し、withViewportMargin が無効なフレキシブルディメンションおよび push の動作とどのように相互作用するかに注目してください。最初の位置が 100px の viewport マージンに違反した場合に overlay が 2 番目の位置にフォールバックし、報告された構成に対するカバレッジがあることが完了の条件です。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- angular, typescript
- 領域
- frontend
- issue の種類
- バグ
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 35/100