How to prevent iOS Safari from making unwanted selections?

Question

When I long-press a toolbar button on my React app in iOS Safari it makes a selection of the icon. I disabled it with CSS on the toolbar:

-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;

But then Safari continues selecting the next silly element it can find.

So in I ended up applying the styles to the root of my app, but now of course the user can't select any text in things like paragraphs.

What I really want is a way to put in a barrier that says "Safari, can you please stop trying to select the next thing you may find?"

So on my toolbar component I do this and I verified it gets called:

  onTouchStart={e => {
    e.stopPropagation();
    e.preventDefault();
    e.bubbles = false;
  }}

I also tried this:

  onTouchStartCapture={e => {
    e.stopPropagation();
    e.preventDefault();
    e.bubbles = false;
  }}

And the same with onSelect, onSelectCapture.

However Safari is ignoring all that and keeps on selecting things up the hierarchy all the way to the root DIV until it finds something nonsensical to select. When I look at what it has selected by copying it, it's just a single whitespace.

What am I missing? Do I really have to apply user-select: none; to the root and then selectively allow selection where it makes sense, such as on DIVs that contain text? And then, how will Safari not find and select that when long-pressing the toolbar?

Khajeh

Answer 1

You can apply the following css, so you can still select <p> and <h> tags:

p {
 -webkit-user-select: text !important;
 user-select: text !important;
}
h1 {
 -webkit-user-select: text !important;
 user-select: text !important;
}
h2 {
 -webkit-user-select: text !important;
 user-select: text !important;
}
h3 {
 -webkit-user-select: text !important;
 user-select: text !important;
}
h4 {
 -webkit-user-select: text !important;
 user-select: text !important;
}
h5 {
 -webkit-user-select: text !important;
 user-select: text !important;
}
h6 {
 -webkit-user-select: text !important;
 user-select: text !important;
}

Defeasance

When you do this and then long-press a button, iOS Safari will bubble up the selection until it finds one of these elements where selection is enabled. Is there any way to stop it from bubbling up? – Khajeh

@Khajeh what exactly do you mean by "bubbling" up? – Defeasance

Say you have a div with a paragraph and another div. That other div has a paragraph and a toolbar div. The toolbar div has a button. When you long-press the button, Safari tries to be clever and goes searching for something to select. CSS says it can't select the button, so it looks at the sibling. There is none, so it looks at the parent (the toolbar), and then the div that contains the toolbar. There it finds the paragraph, and it selects that. The selection event is bubbling up. I'm trying to stop that from happening. CSS can't stop it. – Khajeh