angular / angular/components

bug(MatFormField): getConnectedOverlayOrigin includes form field hint area

オープン
#27,967 コメント 1 件 リアクション 3 件 担当者 0 名 GitHub で見る
area: material/form-field P4
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
91

説明

### Is this a regression?

- [X] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

v14 (works w/ Legacy)

### Description

When migrating to the MDC-based components, the `getConnectedOverlayOrigin()` method on `MatFormField` now seems to point to the bottom of entire form field div (i.e. including the hint area) rather than the bottom edge of the input box. This makes it difficult to attach overlays to the bottom of custom form fields in a clean non-hacky way.

Basic example that demonstrates the problem:

1. Create a basic component that implements `MatFormFieldControl` (just directly copying the example [from the guide here](https://material.angular.io/guide/creating-a-custom-form-field-control) works for this).
2. Add a simple `mat-autocomplete` and wire it up to the input on the component.
3. Add a `MatAutocompleteOrigin` field to the component which points to the `MatFormField`'s `getConnectedOverlayOrigin()` (also may need to update this on ngOnInit to be safe).
4. Set the `matAutocompleteConnectedTo` in the template to the `MatAutocompleteOrigin` field.

Previously this would make the autocomplete overlay open lined up below the bottom edge of the form field, now there is an unsightly gap.

### Reproduction

StackBlitz link: https://stackblitz.com/edit/6vnpqz

Steps to reproduce:
1. Click the form field

### Expected Behavior

Attached overlay should appear directly below the form field's underline

### Actual Behavior

Attached overlay appears below the form field's hint area

### Environment

- Angular: 16.1.1
- CDK/Material: 16.2.9
- Browser(s): Chrome, Firefox
- Operating System (e.g. Windows, macOS, Ubuntu): Windows, Ubuntu

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

Issue で説明されているカスタム MatFormFieldControl と mat-autocomplete のセットアップを使用して、StackBlitz の再現例と MatFormField.getConnectedOverlayOrigin() のエントリポイントから開始します。接続されたオーバーレイがヒント領域の下ではなく、フォームフィールドの下線のすぐ下に配置されることを確認します。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
frontend
issue の種類
バグ
難易度
3/5
見積もり時間
1〜2日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
45/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。