Skip to content

Conversation

kharazian
Copy link
Contributor

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

* 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 =
Copy link
Member

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.

Copy link
Contributor Author

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.

// border-radius based on the overlay position.
const panelClass = this._aboveClass;

/**
Copy link
Member

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.

Copy link
Contributor Author

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.

@devversion devversion removed their request for review August 28, 2023 11:03
@kharazian kharazian requested a review from crisbeto September 3, 2023 13:00
@kharazian kharazian force-pushed the calculate-overlay-offset-for-outlined-input-fields branch from c6f883c to 8f1b1b3 Compare September 27, 2023 12:47
@josephperrott josephperrott requested a review from a team as a code owner December 18, 2024 17:40
@mmalerba mmalerba removed request for mmalerba and a team February 19, 2025 01:04
@mmalerba mmalerba added the target: patch This PR is targeted for the next patch release label Sep 12, 2025
…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
@mmalerba mmalerba force-pushed the calculate-overlay-offset-for-outlined-input-fields branch from 8f1b1b3 to 1490253 Compare September 12, 2025 05:03
@mmalerba mmalerba added the dev-app preview When applied, previews of the dev-app are deployed to Firebase label Sep 12, 2025
Copy link

Deployed dev-app for 1490253 to: https://ng-dev-previews-comp--pr-angular-components-27714-dev-eewx7wsq.web.app

Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area: material/autocomplete dev-app preview When applied, previews of the dev-app are deployed to Firebase target: patch This PR is targeted for the next patch release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

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