iOS: How to prevent text selection onLongPress

[Nasicus]

First of all: Thanks for this small library :)

So I saw #2 and applied this to our "images" (see screenshot) so the default iOS menu (to save the photo etc.) doesn't open anymore. And now the longPress event works (meaning the callout appears). However it always "randomly" selects text around it:

Is there anyway to prevent this?

Or would I need to apply:

  -webkit-user-select: none; /* disable selection/Copy of UIWebView */
  -webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */

"everywhere".

Thanks for the help :)

[Nasicus]

FYI: As a workaround I just applied the snipped everywhere once the long press was executed (an then once the "callout" is closed remove it again).

  -webkit-user-select: none; /* disable selection/Copy of UIWebView */
  -webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */

[minwork]

Have you tried preventing events default or propagation on touch start and/or end (consider both synthetic and native events)? Not sure it will work but worth trying.

[minwork]

I have also dug out my old project where I had similar issues with selection on iOS devices and I mitigated them using user-select: none on html and img tags as well as explicitly using user-select: text on text tags like p etc. but mind that it will make only text elements selectable for context actions like copy / paste

[Nasicus]

Have you tried preventing events default or propagation on touch start and/or end (consider both synthetic and native events)? Not sure it will work but worth trying.

Yes I tried some variations of that. I.e. pass true to capture the event, then preventing default and stopping propogation there. Also tried to prevent "propogation" already on start etc. but didn't really work.

Really weird that it's that annoying. I can live with my workaround however. Which kind of sounds like what you've done. Except that you always apply the styles, whereas I onyl do it once the long press trigered (it results in some minor flickering...). Will let you know in case I find a better solution (if I take to time to find it that is... ;D )

[minwork]

Maybe this will help? https://stackoverflow.com/questions/61855027/prevent-text-selection-on-tap-and-hold-on-ios-13-mobile-safari

[minwork]

Hey @Nasicus, did you managed to solve this issue using one of the methods described in the link above?

[Nasicus]

@minwork thanks for asking. But I did not really manage to solve it. I quickly tried your last stack post, but didn't seem to work. As far as I could see the useLongPress also only epxoses start?

I'm still using my workaround described above for now (which I can live with).

[minwork]

Currently you can hook into touch start (onStart) and touch end (onCancel / onFinish). When #8 comes into live you will also be able to hook into touch move. Nevertheless right now you can do it manually by specifying onTouchMove prop

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[M-Rb3]

Did you find a fix for this? facing the same problem