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?