From 79cd59dea5bd3daba019900d10a539a2692147a7 Mon Sep 17 00:00:00 2001
From: PhotoNomad0 <bruce.mclean@unfoldingword.org>
Date: Mon, 4 Dec 2023 14:34:38 -0500
Subject: [PATCH] fix to make scripture selection easier.

---
 package.json                                  |  2 +-
 .../verse-objects/AlignedWordsObject.js       | 36 ++++++++++++++-----
 2 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index 2c73f79..cceed8c 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "scripture-resources-rcl",
   "description": "A React Component Library for Rendering Scripture Resources.",
-  "version": "5.5.8",
+  "version": "5.5.9-beta",
   "homepage": "https://scripture-resources-rcl.netlify.com/",
   "repository": {
     "type": "git",
diff --git a/src/components/verse-objects/AlignedWordsObject.js b/src/components/verse-objects/AlignedWordsObject.js
index 5478570..3d1324e 100644
--- a/src/components/verse-objects/AlignedWordsObject.js
+++ b/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;