[input] Fix border color resolution on mobile

[wojtek35]

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

• Updated the focus styles to ensure that the border color appears correctly on mobile devices.
• Added media queries to handle hover and pointer events appropriately for different device capabilities.

Related Issues

Fix #43797

[mnajdova]

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.

[mui-bot]

Netlify deploy preview

https://deploy-preview-43879--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against a35b670

[mnajdova]

I simplified a bit the fix, thanks for the effort! :)

[oliviertassinari]

Nice 👍