[OutlinedInput] No highlighted border on input on mobile

[matthiasschwarz]

Steps to reproduce

Link to live example: Example

Steps:

1. Open site on mobile (or emulate mobile device via DevTools of the browser)
2. Click inside the input field

Current behavior

The border of the input field is not highlighted.

Expected behavior

The border of the input field is highlighted since this is the behaviour on desktop and @mui/material versions below 6.

Context

The user expects a visible clue on the border of a focused outlined input during input.

This issue seems be caused by a change of the style rule order introduced in @mui/material since version 6. The @media (hover: none) currently takes priority and removes the highlighting of the border. Reference

Your environment

No response

Search keywords: @mui/material, OutlinedInput, Border, Focus, Mobile

[AsimSafarli]

code working at platform

[wojtekfarmery]

Can I take over? I have a potential solution

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

We value your feedback @matthiasschwarz! How was your experience with our support team?
We'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!