Merge pull request Doenet#24 from dqnykamp/virtkey

detect if the accessing keyboard caused mathinput blur

packages/doenetml/src/Viewer/renderers/mathInput.jsx

@@ -63,6 +63,9 @@ export default function MathInput(props) {
     const [focused, setFocused] = useState(null);
     const textareaRef = useRef(null); // Ref to keep track of the mathInput's disabled state
 
+    const lastKeyboardAccessTime = useRef(0);
+    const keyboardCausedBlur = useRef(false);
+
     const setRendererState = useSetRecoilState(rendererState(rendererName));
 
     const { showAnswerTitles } = useContext(PageContext) || {};
@@ -102,28 +105,22 @@ export default function MathInput(props) {
         }
     };
 
-    const handleVirtualKeyboardClick = (text) => {
-        if (!mathField) {
+    const handleVirtualKeyboardClick = ({ type, command, timestamp }) => {
+        lastKeyboardAccessTime.current = timestamp;
+
+        if (!mathField || !keyboardCausedBlur.current) {
             return;
         }
         mathField.focus();
-        if (!text) {
-            console.log("Empty value");
 
-            return;
-        }
-        const splitCommand = text.split(" ");
-        const command = splitCommand[0];
-        const input = text.substring(command.length + 1);
-
-        if (command == "cmd") {
-            mathField.cmd(input);
-        } else if (command == "write") {
-            mathField.write(input);
-        } else if (command == "keystroke") {
-            mathField.keystroke(input);
-        } else if (command == "type") {
-            mathField.typedText(input);
+        if (type == "cmd") {
+            mathField.cmd(command);
+        } else if (type == "write") {
+            mathField.write(command);
+        } else if (type == "keystroke") {
+            mathField.keystroke(command);
+        } else if (type == "type") {
+            mathField.typedText(command);
         }
     };
 
@@ -165,6 +162,12 @@ export default function MathInput(props) {
         });
         // console.log(">>>", e.relatedTarget.id, checkWorkButton.props.id);
         setFocused(false);
+
+        // If the keyboard blur was immediately preceded by a keyboard access,
+        // then the blur was likely caused by clicking on the keyboard.
+        // (The mousedown event on the keyboard seems to be processed before the blur event.)
+        keyboardCausedBlur.current =
+            Math.abs(lastKeyboardAccessTime.current - new Date()) < 100;
     };
 
     const onChangeHandler = (text) => {
@@ -398,31 +401,6 @@ export default function MathInput(props) {
                                     textareaRef.current =
                                         document.createElement("textarea");
                                     textareaRef.current.disabled = SVs.disabled;
-                                    textareaRef.current.addEventListener(
-                                        "focusout",
-                                        (e) => {
-                                            // apparently there are array-like things in javascript that
-                                            // can be converted to real arrays with Array.from()
-                                            // https://stackoverflow.com/a/22754453
-                                            let keyboards = Array.from(
-                                                document.getElementsByClassName(
-                                                    "keyboardcontainer",
-                                                ),
-                                            );
-                                            keyboards.forEach((keyboard) => {
-                                                if (
-                                                    keyboard?.contains(
-                                                        e.relatedTarget,
-                                                    )
-                                                ) {
-                                                    e.target.focus();
-                                                } else {
-                                                    // remove focus
-                                                }
-                                            });
-                                        },
-                                        false,
-                                    );
                                     return textareaRef.current;
                                 },
                             }} //more commands go here

packages/virtual-keyboard/src/virtual-keyboard-new/keyboard-tray.tsx

@@ -28,7 +28,26 @@ export function KeyboardTray({ onClick }: { onClick: OnClick }) {
     const [open, setOpen] = React.useState(false);
 
     return ReactDOM.createPortal(
-        <div id="virtual-keyboard-tray" className={classNames({ open })}>
+        <div
+            id="virtual-keyboard-tray"
+            className={classNames({ open })}
+            onMouseDown={() => {
+                // The mousedown event appears to precede a blur event on a mathInput,
+                // so this access event will set the accessed timestamp to be
+                // just before the time of the blur if keyboard is clicked while the mathInput is focused.
+                onClick([
+                    { type: "accessed", command: "", timestamp: +new Date() },
+                ]);
+            }}
+            onClick={() => {
+                // If the keyboard is clicked but a key is not clicked, then we send
+                // this accessed event to make sure the math input is still re-focused after the click.
+                // (The click event appears to occur after the blur event on a mathInput.)
+                onClick([
+                    { type: "accessed", command: "", timestamp: +new Date() },
+                ]);
+            }}
+        >
             <button
                 className="open-keyboard-button"
                 onClick={() => setOpen((old) => !old)}

packages/virtual-keyboard/src/virtual-keyboard-new/keyboard.tsx

@@ -130,7 +130,13 @@ function Key({
     return (
         <button
             className={`key key-${keyInfo.name} ${keyInfo.isMath ? "math" : ""}`}
-            onClick={() => onClick(keyInfo.commands)}
+            onClick={(e) => {
+                // Prevent the click event on the keyboard itself from triggering
+                // so that its "accessed" event doesn't cancel the propagation
+                // of the key click event.
+                e.stopPropagation();
+                onClick(keyInfo.commands);
+            }}
             title={`Type ${keyInfo.name}`}
         >
             {content}

packages/virtual-keyboard/src/virtual-keyboard-new/keys.ts

@@ -1,6 +1,7 @@
 export type KeyCommand = {
-    type: "keystroke" | "type" | "write" | "cmd";
+    type: "keystroke" | "type" | "write" | "cmd" | "accessed";
     command: string;
+    timestamp?: number;
 };
 
 export type KeyDescription = {

packages/virtual-keyboard/src/virtual-keyboard-new/translate-events.ts

@@ -11,6 +11,6 @@ export function translateKeyboardEvent(commands: KeyCommand[]) {
             return { focusedMathFieldReturn: "" };
         }
 
-        return { focusedMathField: `${command.type} ${command.command}` };
+        return { focusedMathField: command };
     });
 }