Skip to content
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.

Sign up for GitHub

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

Jump to bottom

[OutlinedInput] No highlighted border on input on mobile #43797

Open
matthiasschwarz opened this issue Sep 17, 2024 · 1 comment
Open

[OutlinedInput] No highlighted border on input on mobile #43797

matthiasschwarz opened this issue Sep 17, 2024 · 1 comment
Assignees
@mj12albert
Labels
bug 🐛 Something doesn't work component: input This is the name of the generic UI component, not the React module! priority: important This change can make a difference regression A bug, but worse status: waiting for maintainer These issues haven't been looked at yet by a maintainer v6.x

Comments

@matthiasschwarz
Copy link

matthiasschwarz commented Sep 17, 2024 •
edited
Loading

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.

image

Expected behavior

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

image

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
@matthiasschwarz matthiasschwarz added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Sep 17, 2024
@AsimSafarli
Copy link

code working at platform

@zannager zannager added the component: input This is the name of the generic UI component, not the React module! label Sep 17, 2024
@oliviertassinari oliviertassinari added bug 🐛 Something doesn't work priority: important This change can make a difference regression A bug, but worse v6.x labels Sep 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@mj12albert mj12albert

Labels
bug 🐛 Something doesn't work component: input This is the name of the generic UI component, not the React module! priority: important This change can make a difference regression A bug, but worse status: waiting for maintainer These issues haven't been looked at yet by a maintainer v6.x
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@oliviertassinari @mj12albert @matthiasschwarz @AsimSafarli @zannager