bug(MatFormField): getConnectedOverlayOrigin includes form field hint area
- Ngôn ngữ chính
- TypeScript
- Star
- 25k
- Fork
- 6.8k
- Merge trung bình
- 1 ngày 8 giờ
- Pull request đã merge (30 ngày)
- 91
Mô tả
### 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
Hướng dẫn đóng góp
Hướng nghiên cứu
Bắt đầu với bản tái hiện trên StackBlitz và điểm vào MatFormField.getConnectedOverlayOrigin(), sử dụng thiết lập MatFormFieldControl tùy chỉnh và mat-autocomplete được mô tả trong issue. Xác nhận rằng overlay được kết nối được định vị ngay bên dưới gạch chân của trường biểu mẫu thay vì bên dưới vùng gợi ý.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- angular, typescript
- Lĩnh vực
- frontend
- Loại issue
- Lỗi
- Độ khó
- 3/5
- Thời gian dự kiến
- 1-2 ngày
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 45/100