fix to make scripture selection easier.

src/components/verse-objects/AlignedWordsObject.js

@@ -10,6 +10,8 @@ import { default as WordLexiconDetails } from 'tc-ui-toolkit/lib/WordLexiconDeta
 import { SelectionsContext } from '../selections/Selections.context';
 import { WordObject, OriginalWordObject } from '.';
 
+const intervalBeforePopup = 500;  // delay 1/2 sec. before showing popup
+
 function AlignedWordsObject({
   children,
   verseKey,
@@ -19,14 +21,26 @@ function AlignedWordsObject({
   translate,
 }) {
   const classes = useStyles();
-  const [anchorEl, setAnchorEl] = useState(null);
+  const [popupPosition, setPopupPosition] = useState(null);
+  const [readyToShow, setReadyToShow] = useState(false);
 
   const handleOpen = (event) => {
-    setAnchorEl(event.currentTarget);
+    setReadyToShow(false); // make sure cleared
+
+    if (!event.buttons) { // only show popup if buttons not depressed (i.e. not selection text)
+      setPopupPosition(event.currentTarget); // save the anchor element for positioning
+
+      delay(intervalBeforePopup).then(() => {
+        setReadyToShow(true);
+      });
+    } else { // if dragging make position for popup is cleared
+      setPopupPosition(null);
+    }
   };
 
   const handleClose = () => {
-    setAnchorEl(null);
+    setPopupPosition(null);
+    setReadyToShow(false);
   };
 
   let selected;
@@ -86,8 +100,8 @@ function AlignedWordsObject({
   }
 
   if (!disableWordPopover) {
-    const open = Boolean(anchorEl);
-    const id = open ? 'popover' : undefined;
+    const openPopup = readyToShow && Boolean(popupPosition);
+    const id = openPopup ? 'popover' : undefined;
     const _originalWords = originalWords.map((verseObject, index) => getOriginalWordObject(index, verseObject));
 
     component = (
@@ -97,14 +111,14 @@ function AlignedWordsObject({
           aria-haspopup="true"
           onMouseEnter={handleOpen}
           onMouseLeave={handleClose}
-          className={open ? classes.open : classes.closed}
+          className={openPopup ? classes.open : classes.closed}
         >
           {words}
         </span>
         <Popover
           id={id}
-          open={open}
-          anchorEl={anchorEl}
+          open={openPopup}
+          anchorEl={popupPosition}
           onClose={handleClose}
           className={classes.popover}
           classes={{ paper: classes.paper }}
@@ -151,4 +165,10 @@ function translate_(key) {
   return key;
 }
 
+function delay(ms) {
+  return new Promise((resolve) =>
+      setTimeout(resolve, ms),
+  )
+}
+
 export default AlignedWordsObject;