Cuando presiono prolongadamente un botón de la barra de herramientas en mi aplicación React en iOS Safari, hace una selección del ícono. Lo deshabilité con CSS en la barra de herramientas:

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

Pero luego Safari continúa seleccionando el siguiente elemento tonto que puede encontrar.

Así que terminé aplicando los estilos a la raíz de mi aplicación, pero ahora, por supuesto, el usuario no puede seleccionar ningún texto en cosas como párrafos.

Lo que realmente quiero es una forma de poner una barrera que diga "Safari, ¿puedes dejar de intentar seleccionar lo siguiente que puedas encontrar?"

Entonces, en el componente de mi barra de herramientas, hago esto y verifiqué que se llama:

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

También probé esto:

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

Y lo mismo con onSelect , onSelectCapture .

Sin embargo, Safari ignora todo eso y sigue seleccionando cosas en la jerarquía hasta el DIV raíz hasta que encuentra algo sin sentido para seleccionar. Cuando miro lo que ha seleccionado al copiarlo, es solo un espacio en blanco.

¿Qué me estoy perdiendo? ¿Realmente tengo que aplicar user-select: none; a la raíz y luego permitir selectivamente la selección donde tenga sentido, como en DIV que contienen texto? Y luego, ¿cómo Safari no encontrará y seleccionará eso cuando mantenga presionada la barra de herramientas?