How to prevent nearby text selection when pressing and holding a button on mobile?

Question

I have an application where a user needs to press and hold a button to record audio. However, when a user holds the button on mobile, the browser tries to select nearby text (since the user is holding their finger down). It makes sense sorta, but I want to prevent this.

Alt Text

When I add user-select: none to the text, it no longer gets selected, but instead the text in the next level higher gets selected instead. Is there a way to completely capture this `user-select event on the button level and prevent it from bubbling to nearby text? I end up chasing the user-select: none event up my DOM tree at the moment and this doesn't feel correct.

Here's my button HTML:

<Button onMouseDown={onMouseDown} onMouseUp={onFinish} onMouseLeave={onFinish} className={classes.button} onTouchStart={onMouseDown} onTouchEnd={onFinish}>
            <div className="flex items-center relative">
                <svg height={radius * 2} width={radius * 2}>
                    <circle stroke="rgba(0,0,0,0.1)" fill="transparent" strokeWidth={stroke} r={normalizedRadius} cx={radius} cy={radius} transform={`rotate(-90 ${radius} ${radius})`} />
                    <circle
                        stroke="black"
                        fill="transparent"
                        strokeWidth={stroke}
                        strokeDasharray={circumference + ' ' + circumference}
                        style={{ strokeDashoffset }}
                        r={normalizedRadius}
                        cx={radius}
                        cy={radius}
                        transform={`rotate(-90 ${radius} ${radius})`}
                    />
                </svg>
                <Mic className="absolute" style={{
                    left: '50%',
                    top: '50%',
                    transform: 'translate(-50%, -50%)',
                    fontSize: '80px'
                }}/>
            </div>
        </Button>
        <div className="flex flex-col items-center justify-center px-3">
            <div className="font-bold mb-1 text-center">
                Click and hold to record your greeting.
            </div>
            <div className="text-center">(Max. 10 seconds)</div>
        </div>

onMouseDown or onTouchStart events trigger the event so I am wondering if I can utilize those events to "cancel" the user-select to prevent text outside of the button from being selected?

    const onMouseDown = async (e: React.MouseEvent | React.TouchEvent) => {
        onStart();
        setIsMicPressed(true)
    }

Thanks for any guidance!

have you tried [this](https://stackoverflow.com/questions/25704650/disable-blue-highlight-when-touch-press-object-with-cursorpointer) answer? — Rajiv, Feb 16 '21 at 14:38
that's exactly what the user added as an answer below (and yes I have) — Jordan Lewallen, Feb 16 '21 at 23:51

score 0 · Answer 1 · answered Feb 15 '21 at 20:04

you can try to add this css:

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

then you can add noselect class to the text

yea - that's what I added as stated in my question, but now it just selects text at the next dom level above — Jordan Lewallen, Feb 15 '21 at 20:14

How to prevent nearby text selection when pressing and holding a button on mobile?

1 Answers1