mui / mui/material-ui

Long pressing a button on mobile causes neighbouring text to be selected

Open
#26,735 5 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

component: ButtonBase scope: button type: bug
Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Description

This can also be observed on the official page of the button component. Since the button has user-select: none, long pressing it on mobile does not select it's inner text, but instead starts selecting the next "user-selectable" text. This has been observed on iOS only, other devices unknown, maybe someone could confirm.

  • The issue is present in the latest release.
  • I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Long pressing a button on mobile selects the neighbouring text.

Expected Behavior 🤔

Long pressing a button on mobile does not select any text at all.

Steps to Reproduce 🕹

Steps:

  1. Go to the button documentation page on a mobile device: https://material-ui.com/components/buttons/
  2. Long press one of the button examples
  3. Observe the next selectable text is selected

Context 🔦

I was trying to detect long presses on a button and although it works, it is annoying to see that some text is being selected elsewhere.

Your Environment 🌎

Material UI's website on iOS 14.4.2 Safari/Chrome/Firefox

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the issue on the official button component page at https://material-ui.com/components/buttons/ using the listed iOS browsers. Confirm that long-pressing a button selects neighbouring text, then verify that the completed fix prevents any text selection while preserving the button's long-press behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.