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