Attach mouseUp event handler properly

oacore · Sep 29, 2019 · 85029df · 85029df
1 parent f5efbac
commit 85029df
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 21 deletions.
diff --git a/src/components/pdf-highlighter/PDFHighlighter.jsx b/src/components/pdf-highlighter/PDFHighlighter.jsx
@@ -22,15 +22,14 @@ class PDFHighlighter extends React.Component {
     selectedText: '',
   }
 
-  componentDidMount() {
-    window.addEventListener('mouseup', this.onAfterSelection.bind(this))
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('mouseup', this.onAfterSelection)
+  onUpdateContextMenu = partialUpdate => {
+    this.setState(state => ({
+      ...state,
+      ...partialUpdate,
+    }))
   }
 
-  onAfterSelection() {
+  handleOnMouseUp() {
     const {
       state: {
         pdfDocument: { pdfViewer },
@@ -83,13 +82,6 @@ class PDFHighlighter extends React.Component {
     })
   }
 
-  onUpdateContextMenu = partialUpdate => {
-    this.setState(state => ({
-      ...state,
-      ...partialUpdate,
-    }))
-  }
-
   render() {
     const {
       contextRoot,
@@ -102,6 +94,7 @@ class PDFHighlighter extends React.Component {
 
     const children = cloneElement(this.props.children, {
       ...this.props,
+      handleOnMouseUp: this.handleOnMouseUp.bind(this),
     })
 
     const contextMenu =

diff --git a/src/components/pdf-viewer/PDFViewer.jsx b/src/components/pdf-viewer/PDFViewer.jsx
@@ -100,7 +100,7 @@ class PDFViewer extends React.PureComponent {
   // when particular PDF page is not rendered
   render() {
     const { toolbarEnabled, metadataContainerWidth } = this.state
-    const { pdfMetadata, pdfEventBus } = this.props
+    const { pdfMetadata, pdfEventBus, handleOnMouseUp } = this.props
     const { Metadata, pdfViewer } = this
 
     return (
@@ -111,12 +111,16 @@ class PDFViewer extends React.PureComponent {
         }}
       >
         {metadataContainerWidth && <Metadata pdfMetadata={pdfMetadata} />}
-        <div
-          ref={node => {
-            this.viewerNode = node
-          }}
-          className="pdfViewer"
-        />
+        <div role="dialog">
+          <div
+            role="presentation"
+            ref={node => {
+              this.viewerNode = node
+            }}
+            className="pdfViewer"
+            onMouseUp={handleOnMouseUp}
+          />
+        </div>
         <PDFRecommender containerWidth={metadataContainerWidth} />
         {toolbarEnabled && (
           <PDFToolbar pdfViewer={pdfViewer} pdfEventBus={pdfEventBus} />