fix(input): improve autofill#2298
Open
desig9stein wants to merge 4 commits into
Open
Conversation
…l-color` - Refactored input text color logic to use a custom property (`--input-text-color`) for compatibility with autofill behavior in WebKit and Chromium. - Replaced transition-delay hack with `background-clip: text` and `-webkit-text-fill-color` to ensure proper rendering of autofilled inputs, especially in scenarios like floating labels in the material theme.
Contributor
There was a problem hiding this comment.
Pull request overview
This PR addresses broken autofill styling in the igc-input component (notably in Material/outlined scenarios) by changing how input text color is authored and by replacing the previous autofill “transition-delay” workaround with a rendering approach based on text clipping and -webkit-text-fill-color.
Changes:
- Mirror input text color into a custom property (
--input-text-color) so autofilled fields can reliably use it via-webkit-text-fill-color. - Replace the previous autofill transition-delay hack with
background-clip: text+-webkit-text-fill-colorto prevent the UA autofill background from covering floating labels (especially on first render with autofill).
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| src/components/input/themes/shared/input.material.scss | Sets --input-text-color for the Material filled-input part token and uses it for color. |
| src/components/input/themes/shared/input.common.scss | Introduces --input-text-color as the source of truth for input text color across common states. |
| src/components/input/themes/input.base.scss | Updates the autofill styling approach to clip the autofill background to text and paint text via -webkit-text-fill-color. |
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Comment on lines
+45
to
+54
| // Chromium and WebKit paint an opaque background and a fixed text color on | ||
| // autofilled fields through UA styles marked as !important, which cannot be | ||
| // overridden by author styles. Without this the autofill background covers the | ||
| // floating label in the material theme. | ||
| // Clipping the background to the text makes it invisible, while the text itself | ||
| // is painted through `-webkit-text-fill-color`, which takes precedence over the | ||
| // UA `color`. Both are static declarations on purpose - the previous | ||
| // transition-delay hack only held back the background as long as a transition | ||
| // could actually run, so inputs first rendered while already autofilled | ||
| // (a login form in a dialog, for instance) still got the UA styling. |
Collaborator
|
@desig9stein Fix the lint errors please. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
--input-text-color) for compatibility with autofill behavior in WebKit and Chromium.background-clip: textand-webkit-text-fill-colorto ensure proper rendering of autofilled inputs, especially in scenarios like floating labels in the material theme.Description
Type of Change
Related Issues
Closes #2289
Testing
Checklist