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

[maxijonson]

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

[maxijonson]

Just found out this issue is probably related to the same issue that #23232 had.

[eps1lon]

Does the same happen for just a text left<button type="button">long press</button>text right? https://codesandbox.io/s/long-press-button-text-select-uujco

[maxijonson]

Does the same happen for just a text left<button type="button">long press</button>text right? https://codesandbox.io/s/long-press-button-text-select-uujco

It does, even the text inside the button is selected (as well as the closest text surrounding it). I had a friend try on his Android device and it did not happen (on MUI's button). So I'm guessing this is an iOS behavior.

Trying your code sandbox seems to indicate this is the "normal" and default behavior. However, on a standard HTML button, I don't expect any special behavior from a long-press. It feels more natural that text is being selected (including the button) on this plain HTML button since there's tiny visual feedback that happens only on a rapid click. In MUI's case, the button's text is not selectable and it has the ripple animation that stays as long as the finger is pressed on. It feels a bit less natural to have random text selected.

The closest solution that I came to was to add an onTouchStart event with preventDefault. However, this stops the user from scrolling on the page if the scroll starts from the button.

[senitelty]

I think this might be related too is a similar issue, when pressed buttons with text change color too, only happens in dark mode and with specific colors.
https://codesandbox.io/s/outlined-button-active-state-bug-e0qod?file=/demo.tsx
Windows 10
Version 94.0.4606.61

[maxijonson]

I think this might be related too is a similar issue, when pressed buttons with text change color too, only happens in dark mode and with specific colors. https://codesandbox.io/s/outlined-button-active-state-bug-e0qod?file=/demo.tsx Windows 10 Version 94.0.4606.61

This could be a browser issue. I've seen this happen in my own projects as well running on Chrome. However, running it in Firefox works fine.