Update debug branch

openstax · Jan 11, 2024 · b65c8ec · b65c8ec
1 parent c40a5e7
commit b65c8ec
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 8 deletions.
diff --git a/src/components/InputProblem.tsx b/src/components/InputProblem.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react'
+import React, { useState, useCallback, useRef } from 'react'
 import type { BaseProblemProps } from './ProblemSetBlock'
 import { determineFeedback, retriesRemaining } from '../lib/problems'
 import { Formik, Form, Field, ErrorMessage, type FormikHelpers } from 'formik'
@@ -49,7 +49,7 @@ export const InputProblem = ({
   const NUMERIC_INPUT_ERROR = 'Enter numeric values only'
   const EXCEEDED_MAX_INPUT_ERROR = 'Input is too long'
   const NON_EMPTY_VALUE_ERROR = 'Please provide valid input'
-
+  const buttonRef = useRef<HTMLButtonElement>(null)
   const schema = (): Yup.Schema<InputSchema> => {
     if (comparator.toLowerCase() === 'integer') {
       return Yup.object({
@@ -192,6 +192,7 @@ export const InputProblem = ({
                     name="response"
                     disabled={inputDisabled || isSubmitting}
                     as={Mathfield}
+                    buttonRef={buttonRef}
                     onInput={(e: React.ChangeEvent<MathfieldElement>): void => { clearFeedback(); void setFieldValue('response', e.target.value) }}
                     className={buildClassName(userResponseCorrect, inputDisabled || isSubmitting, errors.response)} />
                     </div>
@@ -208,7 +209,8 @@ export const InputProblem = ({
               </div>
               <ErrorMessage className="text-danger my-3" component="div" name="response" />
               <div className="os-text-center mt-4">
-              <button type="submit" disabled={inputDisabled || isSubmitting} className="os-btn btn-outline-primary">{buttonText}</button></div>
+                {/* pass button as ref into field */}
+              <button ref={buttonRef} type="submit" onBlur={ev => { console.log('Eat event!'); ev.stopPropagation() } } disabled={inputDisabled || isSubmitting} className="os-btn btn-outline-primary">{buttonText}</button></div>
               {feedback !== '' ? <div ref={contentRefCallback} dangerouslySetInnerHTML={{ __html: feedback }} className="my-3 os-feedback-message" /> : null}
               <AttemptsCounter retryLimit={retryLimit} retriesAllowed={retriesAllowed}/>
             </Form>

diff --git a/src/components/Mathfield.tsx b/src/components/Mathfield.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react'
+import { Ref, useEffect, useRef } from 'react'
 import { MathfieldElement } from 'mathlive'
 
 MathfieldElement.fontsDirectory = 'https://unpkg.com/mathlive/dist/fonts/'
@@ -16,9 +16,10 @@ interface MathfieldProps {
   onInput: (event: React.ChangeEvent<MathfieldElement>) => void
   className: string
   disabled: boolean
+  buttonRef: React.RefObject<HTMLButtonElement>
 }
 
-export const Mathfield = ({ className, disabled, onInput }: MathfieldProps): JSX.Element => {
+export const Mathfield = ({ className, disabled, onInput, buttonRef }: MathfieldProps): JSX.Element => {
   const mathfieldRef = useRef<MathfieldElement>(null)
   const mathKeyboardRef = useRef<HTMLDivElement>(null)
 
@@ -39,13 +40,14 @@ export const Mathfield = ({ className, disabled, onInput }: MathfieldProps): JSX
       const w = maybeMathKeyboard.offsetWidth
       maybeMathKeyboard.style.top = `${r.bottom + 16}px`
       maybeMathKeyboard.style.left = `${r.left + r.width / 2 - w / 2}px`
-      maybeMathKeyboard.style.height = '300px'
+      maybeMathKeyboard.style.height = '310px'
       maybeMathKeyboard.style.width = '100%'
       window.mathVirtualKeyboard.show()
     })
 
     const handleFocusOut = (ev: FocusEvent): void => {
-      if (ev.relatedTarget === null) {
+      console.log(ev)
+      if ((ev.relatedTarget !== buttonRef.current) && (ev.isTrusted)) {
         maybeMathKeyboard.style.display = 'none'
         window.mathVirtualKeyboard.hide()
       }
@@ -56,9 +58,26 @@ export const Mathfield = ({ className, disabled, onInput }: MathfieldProps): JSX
 
   useEffect(() => {
     const mathFieldCurrent = mathfieldRef.current
-    if ((mathFieldCurrent === null)) {
+    const maybeMathKeyboard = mathKeyboardRef.current
+
+    if ((mathFieldCurrent === null) || (maybeMathKeyboard === null)) {
       return
     }
+    // if (disabled) {
+    //   maybeMathKeyboard.style.display = 'none'
+    //   window.mathVirtualKeyboard.hide()
+    // }
+    // if (!disabled) {
+    //   window.mathVirtualKeyboard.container = maybeMathKeyboard
+    //   const r = mathFieldCurrent.getBoundingClientRect()
+    //   maybeMathKeyboard.style.display = 'block'
+    //   const w = maybeMathKeyboard.offsetWidth
+    //   maybeMathKeyboard.style.top = `${r.bottom + 16}px`
+    //   maybeMathKeyboard.style.left = `${r.left + r.width / 2 - w / 2}px`
+    //   maybeMathKeyboard.style.height = '310px'
+    //   maybeMathKeyboard.style.width = '100%'
+    //   window.mathVirtualKeyboard.show()
+    // }
 
     if (disabled && mathFieldCurrent.shadowRoot !== null) {
       const pointerEventSpan = mathFieldCurrent.shadowRoot.querySelector('span')