angular / angular/components

bug(autocomplete, select): should leave extra space when positioned above outlined form-field

Open
#27,476 0 comments 0 reactions 0 assignees View on GitHub
area: material/autocomplete area: material/form-field area: material/select P3
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 the autocomplete or select is positioned above an outlined form-field (due to insufficient space on the bottom), it overlaps the label. Ideally we would add some additional space when positioning above so that the label is still legible.

### Reproduction

StackBlitz link: https://stackblitz.com/edit/6pam3o
Steps to reproduce:
1. Click inside form-field
2. Observe that autocomplete overlaps the label

### Expected Behavior

Label should be legible while select/autocomplete is open

### Actual Behavior

select/autocomplete obscures label

### Environment

- Angular: 16
- CDK/Material: 16
- Browser(s): All
- Operating System (e.g. Windows, macOS, Ubuntu): All

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction using Angular 16 and CDK/Material 16, then inspect the autocomplete and select positioning behavior for an outlined form-field when the overlay opens above it. Confirm the overlap shown in the reproduction and verify that the label remains legible when the issue is fixed.

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
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.