-
-
Notifications
You must be signed in to change notification settings - Fork 32.5k
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
[input] Fix border color resolution on mobile #43879
[input] Fix border color resolution on mobile #43879
Conversation
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.
The proposed changes while they work, they are changing the specificity and adding additional complexity. We can fix the issue simply by moving the '@media (hover: none)` style in the same position where it was in v5, see the code
This diff should be sufficient:
index e96b4ec567..af2715d017 100644
--- a/packages/mui-material/src/OutlinedInput/OutlinedInput.js
+++ b/packages/mui-material/src/OutlinedInput/OutlinedInput.js
@@ -51,6 +51,14 @@ const OutlinedInputRoot = styled(InputBaseRoot, {
[`&:hover .${outlinedInputClasses.notchedOutline}`]: {
borderColor: (theme.vars || theme).palette.text.primary,
},
+ // Reset on touch devices, it doesn't add specificity
+ '@media (hover: none)': {
+ [`&:hover .${outlinedInputClasses.notchedOutline}`]: {
+ borderColor: theme.vars
+ ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)`
+ : borderColor,
+ },
+ },
[`&.${outlinedInputClasses.focused} .${outlinedInputClasses.notchedOutline}`]: {
borderWidth: 2,
},
@@ -68,14 +76,6 @@ const OutlinedInputRoot = styled(InputBaseRoot, {
{
props: {}, // to overide the above style
style: {
- // Reset on touch devices, it doesn't add specificity
- '@media (hover: none)': {
- [`&:hover .${outlinedInputClasses.notchedOutline}`]: {
- borderColor: theme.vars
- ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)`
- : borderColor,
- },
- },
[`&.${outlinedInputClasses.error} .${outlinedInputClasses.notchedOutline}`]: {
borderColor: (theme.vars || theme).palette.error.main,
},
We never wanted the hover styles to override the focus styles, that code segment was only intended for the error and disabled states.
Netlify deploy previewhttps://deploy-preview-43879--material-ui.netlify.app/ Bundle size reportDetails of bundle changes (Toolpad) |
I simplified a bit the fix, thanks for the effort! :) |
Nice 👍 |
Summary
This pull request addresses the issue with the border color of the
OutlinedInput
component on mobile devices. Previously, the focus state did not display the correct color due to a lack of specificity in styles for touch devices.Changes Made
Related Issues
Fix #43797