-
Notifications
You must be signed in to change notification settings - Fork 6.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix(material/autocomplete): Prevent Autocomplete overlap with outlined form-field label when overlay is positioned above #27714
base: main
Are you sure you want to change the base?
Conversation
* Calculate the vertical offset for the overlay when the input field has an outline appearance. | ||
* In the outline appearance, the overlay should have extra space to display the label correctly. | ||
*/ | ||
const outlineHeight = |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This logic will measure the floating label height even if the form field isn't using the outlined
appearance. This should be guarded with the hasOutline
check since it has performance implications.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you for pointing out the need to optimize this logic. I've first checked _hasOutline() to enhance performance when measuring the floating label height in cases where the form field isn't using the outlined appearance.
@@ -830,9 +830,25 @@ export class MatAutocompleteTrigger | |||
// the opposite end has rounded corners. We apply a CSS class to swap the | |||
// border-radius based on the overlay position. | |||
const panelClass = this._aboveClass; | |||
|
|||
/** |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should use the //
style comments.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you, I've made the correction.
…d label when overlay above Fixes by preventing Autocomplete overlap with outlined form-field label when overlay is positioned above. Implemente a function to calculate the necessary vertical offset for outlined appearance, ensuring label legibility. Fixes angular#27476
…ing parent form field Fixes angular#27476
…he outline appearance Fixes angular#27476
c6f883c
to
8f1b1b3
Compare
Fixed by preventing Autocomplete overlap with outlined form-field label when overlay is positioned above. Implemented a function to calculate the necessary vertical offset for outlined appearance, ensuring label legibility.
Fix #27476