Unexpected event type message

[rubayethossain]

Hi,

I have been developing a React component using the Mathlive library. The version is 0.97.4. It's a next.js project. Since this is a react implementation of the mathlive library thus I am following this repository as reference. I have also read the official documentation.

I have been getting an warning of Unexpected event type message on both my end as well as running this repo. The warning details is below,

The warning is showing multiple times. If I check the source of the error it's here,

switch (evt.type) {
      case "focus":
        this.onFocus();
        break;
      ...
      case "wheel":
        this.onWheel(evt);
        break;
      default:
        console.warn("Unexpected event type", evt.type);
    }

Here is my implementation.

import { RefObject, forwardRef, useCallback, useEffect, useImperativeHandle, useRef } from 'react'

import { MathfieldElement } from 'mathlive'

import styles from './OnScreenKeyboardInput.module.css'
import { KEYBOARD_LAYOUT_ALGEBRA } from './keyboardLayouts.const'

interface InputKeyboardProps {
  autoFocus?: boolean
  isError?: boolean
  type: 'number' | 'text'
  value: string
  onChange: (value: string | number) => void
  onEnterPress?: () => void
}

interface ImperativeHandleProps {
  focus: () => void
  blur: () => void
  setValue: (newValue: string) => void
}

const InputKeyboard = (
  { onChange, value, type, autoFocus, onEnterPress, isError }: InputKeyboardProps,
  ref: RefObject<ImperativeHandleProps>,
): JSX.Element => {
  const inputRef = useRef<MathfieldElement>(new MathfieldElement())

  useEffect(() => {
    const mathInputRef = inputRef.current

    if (mathInputRef && typeof window !== 'undefined') {
      // Set fonts and sounds directory
      MathfieldElement.fontsDirectory = '/fonts'
      MathfieldElement.soundsDirectory = '/sounds'

      mathInputRef.mathVirtualKeyboardPolicy = 'manual'
      // Hide keyboard menu
      mathInputRef.menuItems = []

      // Set keyboard layout
      window.mathVirtualKeyboard.layouts = KEYBOARD_LAYOUT_ALGEBRA

      // Show keayboard
      const showKeyboard = (): void => window.mathVirtualKeyboard.show()

      // Hide keyboard
      const hideKeyboard = (): void => window.mathVirtualKeyboard.hide()

      // Show keyboard on focus
      mathInputRef.addEventListener('focusin', showKeyboard)

      // Hide keyboard on click outside
      mathInputRef.addEventListener('focusout', hideKeyboard)

      return () => {
        mathInputRef.removeEventListener('focusin', showKeyboard)
        mathInputRef.removeEventListener('focusout', hideKeyboard)
      }
    }
  }, [])

  // Manually handle autofocus since mathfield doesn't working with autoFocus.
  // TODO: Remove this when mathfield support autoFocus
  useEffect(() => {
    if (autoFocus) inputRef?.current?.focus()
  }, [autoFocus])

  const onEnterPressCallback = useCallback(
    (evt: InputEvent) => {
      if (!onEnterPress) return

      if (evt.inputType === 'insertLineBreak') {
        onEnterPress?.()
        evt.preventDefault()
      }
    },
    [onEnterPress],
  )

  useEffect(() => {
    const inputFieldRef = inputRef.current

    if (!inputFieldRef) return

    inputFieldRef.addEventListener('beforeinput', onEnterPressCallback)

    return () => {
      inputFieldRef.removeEventListener('beforeinput', onEnterPressCallback)
    }
  }, [onEnterPressCallback])

  useImperativeHandle(
    ref,
    (): ImperativeHandleProps => {
      return {
        focus: () => {
          inputRef?.current?.focus()
        },
        blur: () => {
          inputRef?.current?.blur()
        },
        setValue: (newValue) => {
          inputRef?.current?.setValue(newValue)
        },
      }
    },
    [],
  )

  const handleMathFieldInput = (evt: React.ChangeEvent<MathfieldElement>): void => {
    onChange(evt.target.value)
  }

  return (
    <div className={`${styles['input-math-field']} ${isError ? styles['is-invalid'] : ''}`}>
      <math-field onInput={handleMathFieldInput} ref={inputRef} typeof={type}>
        {value}
      </math-field>
    </div>
  )
}

const OnScreenKeyboardInput = forwardRef(InputKeyboard)

export default OnScreenKeyboardInput

Do you have any idea why this warning is showing? Surprisingly, this warning is only showing when I am using the React Developer Tool extension. Also, could you please check if my implementation is okay.

Thanks!