From db249d920da4f42c9a401b1a4839c8d902913f84 Mon Sep 17 00:00:00 2001
From: Glenn Rice <grice1@missouriwestern.edu>
Date: Thu, 26 May 2022 15:34:53 -0500
Subject: [PATCH] Revert to the mqeditor toolbar focus hack previously used
 with WeBWorK and PG 2.16.

It seems that Safari does not properly honor the specifications for the FocusEvent.RelatedTarget, and the new method does not work for that lame browser (at least the current version).
---
 htdocs/js/apps/MathQuill/mqeditor.js | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/htdocs/js/apps/MathQuill/mqeditor.js b/htdocs/js/apps/MathQuill/mqeditor.js
index 4793f2654f..508ccc81eb 100644
--- a/htdocs/js/apps/MathQuill/mqeditor.js
+++ b/htdocs/js/apps/MathQuill/mqeditor.js
@@ -84,8 +84,11 @@
 			{ id: 'text', latex: '\\text', tooltip: 'text mode (")', icon: 'Tt' }
 		];
 
+		answerQuill.hasFocus = false;
+
 		// Open the toolbar when the mathquill answer box gains focus.
 		answerQuill.textarea.addEventListener('focusin', () => {
+			answerQuill.hasFocus = true;
 			if (answerQuill.toolbar) return;
 
 			answerQuill.toolbar = document.createElement('div');
@@ -114,6 +117,7 @@
 				}));
 
 				button.addEventListener('click', () => {
+					answerQuill.hasFocus = true;
 					answerQuill.mathField.cmd(button.dataset.latex);
 					answerQuill.textarea.focus();
 				})
@@ -136,15 +140,15 @@
 		});
 
 		answerQuill.textarea.addEventListener('focusout', (e) => {
-			if (e.relatedTarget && (e.relatedTarget.closest('.quill-toolbar') ||
-				e.relatedTarget.classList.contains('symbol-button')))
-				return;
-			if (answerQuill.toolbar) {
-				window.removeEventListener('resize', answerQuill.toolbar.adjustWidth);
-				answerQuill.toolbar.tooltips.forEach((tooltip) => tooltip.dispose());
-				answerQuill.toolbar.remove();
-				delete answerQuill.toolbar;
-			}
+			answerQuill.hasFocus = false;
+			setTimeout(function() {
+				if (!answerQuill.hasFocus && answerQuill.toolbar) {
+					window.removeEventListener('resize', answerQuill.toolbar.adjustWidth);
+					answerQuill.toolbar.tooltips.forEach((tooltip) => tooltip.dispose());
+					answerQuill.toolbar.remove();
+					delete answerQuill.toolbar;
+				}
+			}, 200);
 		});
 
 		// Trigger an answer preview when the enter key is pressed in an answer box.