Support on touch devices about react-pdf-highlighter HOT 5 CLOSED

I tested in mobile Safari and it seems that there is a bug – popup does not appear after text selection, though iOS does support selectionchange. Do you want to investigate this further?

from react-pdf-highlighter.

sure I'll see if I can find a fix

from react-pdf-highlighter.

The problem seems to be related to relying on mouse events (e.g. mouseUp). The selectionchange event seems to work fine. An option could be relying on pointer events and https://github.com/MilllerTime/react-pointable which comes with a polyfill.

In an Android tablet what I experienced is that when you change a selection only selectionchange event is fired and not pointerup so I'm thinking the best solution would be relying on selectionchange for showing the popup?

from react-pdf-highlighter.

As a quick experiment I tried this change, to get rid of mouseup:

diff --git a/src/components/PdfAnnotator.js b/src/components/PdfAnnotator.js
index 503c6da..845294d 100644
--- a/src/components/PdfAnnotator.js
+++ b/src/components/PdfAnnotator.js
@@ -426,6 +426,8 @@ class PdfAnnotator<T_HT: T_Highlight> extends Component<
       isCollapsed: false,
       range
     });
+
+    setTimeout(this.onMouseUp, 0);
   };
 
   onScroll = () => {
@@ -529,11 +531,7 @@ class PdfAnnotator<T_HT: T_Highlight> extends Component<
     const { onSelectionFinished, enableAreaSelection } = this.props;
 
     return (
-      <div
-        ref={node => (this.containerNode = node)}
-        onMouseUp={() => setTimeout(this.onMouseUp, 0)}
-        className="PdfAnnotator"
-      >
+      <div ref={node => (this.containerNode = node)} className="PdfAnnotator">
         <div className="pdfViewer" />
         {typeof enableAreaSelection === "function" ? (
           <MouseSelection

and now I get the same problem I was fighting some time before.

Before the change:

After the change:

To reproduce, apply the change and select the full paragraph, then click "Add highlight". As you can see with the change the highlight bounds are incorrect.

I don't have much time to investigate this further now, but if you're interested, I would appreciate a PR for removing onMouseUp.

from react-pdf-highlighter.

ah I see! I've encountered that error too, I'll check and see if I can fix it

from react-pdf-highlighter.