@khanacademy/math-input 17.2.3 → 17.4.0

package/dist/fake-react-native-web/text.d.ts

@@ -1,3 +1,4 @@
+/// <reference path="../../types/aphrodite.d.ts" />
 import * as React from "react";
 import type { StyleType } from "@khanacademy/wonder-blocks-core";
 import type { CSSProperties } from "aphrodite";

package/dist/index.js

@@ -47,7 +47,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/math-input";
-const libVersion = "17.2.3";
+const libVersion = "17.4.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -1526,6 +1526,7 @@ class MathInput extends React__namespace.Component {
   };
   state = {
     focused: false,
+    showInputFocusStyle: false,
     handle: {
       animateIntoPosition: false,
       visible: false,
@@ -1608,6 +1609,8 @@ class MathInput extends React__namespace.Component {
       // multi-touch.
       if (this.state.focused && this.didTouchOutside && !this.didScroll) {
         this.blur();
+        this.mathField.blur();
+        this.props.onBlur?.();
       }
       this.didTouchOutside = false;
       this.didScroll = false;
@@ -1632,6 +1635,7 @@ class MathInput extends React__namespace.Component {
             // in which case we don't want to dismiss the keypad on check.
             if (!isWithinKeypadBounds(x, y)) {
               this.blur();
+              this.props.onBlur && this.props.onBlur();
             }
           }
         }
@@ -1726,15 +1730,14 @@ class MathInput extends React__namespace.Component {
   };
   blur = () => {
     this.mathField.blur();
-    this.props.onBlur && this.props.onBlur();
     this.setState({
-      focused: false,
+      showInputFocusStyle: false,
       handle: {
         visible: false
       }
     });
   };
-  focus = () => {
+  focus = setKeypadActive => {
     // Pass this component's handleKey method to the keypad so it can call
     // it whenever it needs to trigger a keypress action.
     this.props.keypadElement?.setKeyHandler(key => {
@@ -1761,8 +1764,10 @@ class MathInput extends React__namespace.Component {
     });
     this.mathField.focus();
     this.props?.onFocus();
+    setKeypadActive(true);
     this.setState({
-      focused: true
+      focused: true,
+      showInputFocusStyle: true
     }, () => {
       // NOTE(charlie): We use `setTimeout` to allow for a layout pass to
       // occur. Otherwise, the keypad is measured incorrectly. Ideally,
@@ -1975,7 +1980,7 @@ class MathInput extends React__namespace.Component {
 
     // Trigger a focus event, if we're not already focused.
     if (!this.state.focused) {
-      this.focus();
+      this.focus(setKeypadActive);
     }
 
     // If the user clicked on the input using a mouse or tap gesture,
@@ -2013,7 +2018,7 @@ class MathInput extends React__namespace.Component {
 
     // Trigger a focus event, if we're not already focused.
     if (!this.state.focused) {
-      this.focus();
+      this.focus(setKeypadActive);
     }
 
     // If the user clicked on the input using a mouse or tap gesture,
@@ -2218,7 +2223,7 @@ class MathInput extends React__namespace.Component {
   };
   render() {
     const {
-      focused,
+      showInputFocusStyle,
       handle
     } = this.state;
     const {
@@ -2227,7 +2232,7 @@ class MathInput extends React__namespace.Component {
     const innerStyle = {
       ...inlineStyles.innerContainer,
       borderWidth: this.getBorderWidthPx(),
-      ...(focused ? {
+      ...(showInputFocusStyle ? {
         borderColor: Color__default["default"].blue
       } : {}),
       ...style
@@ -2266,13 +2271,17 @@ class MathInput extends React__namespace.Component {
         ref: node => {
           this.inputRef = node;
         },
+        onFocus: () => {
+          this.focus(setKeypadActive);
+        },
+        onBlur: this.blur,
         onKeyUp: this.handleKeyUp
       }, /*#__PURE__*/React__namespace.createElement("div", {
         ref: node => {
           this._mathContainer = ReactDOM__default["default"].findDOMNode(node);
         },
         style: innerStyle
-      })), focused && handle.visible && /*#__PURE__*/React__namespace.createElement(CursorHandle, _extends({}, handle, {
+      })), showInputFocusStyle && handle.visible && /*#__PURE__*/React__namespace.createElement(CursorHandle, _extends({}, handle, {
         onTouchStart: this.onCursorHandleTouchStart,
         onTouchMove: this.onCursorHandleTouchMove,
         onTouchEnd: this.onCursorHandleTouchEnd,
@@ -4787,6 +4796,13 @@ const KeypadButton = _ref => {
     testId: keyConfig.id
   }, /*#__PURE__*/React__namespace.createElement(Clickable__default["default"], {
     onClick: e => onClickKey(keyConfig.id, e),
+    onMouseDown: e =>
+    // Prevent the default behavior of forcing the focus to the
+    // button when it is clicked. This way, the focus can
+    // remain on the input field-- for mouse only. The focus
+    // should still shift for keyboard nav.
+    // (The focus shift happens on mouse down, not on click.)
+    e.preventDefault(),
     style: styles$4.clickable,
     "aria-label": keyConfig.ariaLabel
   }, _ref2 => {