@khanacademy/math-input 16.1.2 → 16.2.0

package/dist/index.js

@@ -48,7 +48,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 = "16.1.2";
+const libVersion = "16.2.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -1399,6 +1399,8 @@ class MathInput extends React__namespace.Component {
 
   // @ts-expect-error - TS2564 - Property 'blurOnTouchEndOutside' has no initializer and is not definitely assigned in the constructor.
 
+  // @ts-expect-error - TS2564 - Property 'blurOnClickOutside' has no initializer and is not definitely assigned in the constructor.
+
   // @ts-expect-error - TS2564 - Property '_container' has no initializer and is not definitely assigned in the constructor.
 
   // @ts-expect-error - TS2564 - Property '_containerBounds' has no initializer and is not definitely assigned in the constructor.
@@ -1446,6 +1448,16 @@ class MathInput extends React__namespace.Component {
     this._container = ReactDOM__default["default"].findDOMNode(this);
     this._root = this._container.querySelector(".mq-root-block");
     this._root.addEventListener("scroll", this._handleScroll);
+    const isWithinKeypadBounds = (x, y) => {
+      const bounds = this._getKeypadBounds();
+
+      // If there are no bounds, then the keypad is not mounted, so we
+      // assume that the event is not within the keypad bounds.
+      if (!bounds) {
+        return false;
+      }
+      return bounds.left <= x && bounds.right >= x && bounds.top <= y && bounds.bottom >= y || bounds.bottom < y;
+    };
 
     // Record the initial scroll displacement on touch start. This allows
     // us to detect whether a touch event was a scroll and only blur the
@@ -1463,10 +1475,9 @@ class MathInput extends React__namespace.Component {
         if (!this._container.contains(evt.target)) {
           let touchDidStartInOrBelowKeypad = false;
           if (this.props.keypadElement && this.props.keypadElement.getDOMNode()) {
-            const bounds = this._getKeypadBounds();
             for (let i = 0; i < evt.changedTouches.length; i++) {
               const [x, y] = [evt.changedTouches[i].clientX, evt.changedTouches[i].clientY];
-              if (bounds.left <= x && bounds.right >= x && bounds.top <= y && bounds.bottom >= y || bounds.bottom < y) {
+              if (isWithinKeypadBounds(x, y)) {
                 touchDidStartInOrBelowKeypad = true;
                 break;
               }
@@ -1502,25 +1513,31 @@ class MathInput extends React__namespace.Component {
         this.dragListener.detach();
       }
     };
+
+    // We want to allow the user to blur the input by clicking outside of it
+    // when using ChromeOS third-party browsers that use mobile user agents,
+    // but don't actually simulate touch events.
+    this.blurOnClickOutside = evt => {
+      if (this.state.focused) {
+        if (!this._container.contains(evt.target)) {
+          if (this.props.keypadElement && this.props.keypadElement.getDOMNode()) {
+            const [x, y] = [evt.clientX, evt.clientY];
+            // We only want to blur if the click is above the keypad,
+            // to the left of the keypad, or to the right of the keypad.
+            // The reasoning for not blurring for any clicks below the keypad is
+            // that the keypad may be anchored above the 'Check answer' bottom bar,
+            // in which case we don't want to dismiss the keypad on check.
+            if (!isWithinKeypadBounds(x, y)) {
+              this.blur();
+            }
+          }
+        }
+      }
+    };
     window.addEventListener("touchstart", this.recordTouchStartOutside);
     window.addEventListener("touchend", this.blurOnTouchEndOutside);
     window.addEventListener("touchcancel", this.blurOnTouchEndOutside);
-
-    // HACK(benkomalo): if the window resizes, the keypad bounds can
-    // change. That's a bit peeking into the internals of the keypad
-    // itself, since we know bounds can change only when the viewport
-    // changes, but seems like a rare enough thing to get wrong that it's
-    // not worth wiring up extra things for the technical "purity" of
-    // having the keypad notify of changes to us.
-    window.addEventListener("resize", this._clearKeypadBoundsCache);
-    window.addEventListener("orientationchange", this._clearKeypadBoundsCache);
-  }
-
-  // eslint-disable-next-line react/no-unsafe
-  UNSAFE_componentWillReceiveProps(props) {
-    if (this.props.keypadElement !== props.keypadElement) {
-      this._clearKeypadBoundsCache();
-    }
+    window.addEventListener("click", this.blurOnClickOutside);
   }
   componentDidUpdate(prevProps, prevState) {
     if (this.mathField.getContent() !== this.props.value) {
@@ -1535,18 +1552,8 @@ class MathInput extends React__namespace.Component {
     window.removeEventListener("touchstart", this.recordTouchStartOutside);
     window.removeEventListener("touchend", this.blurOnTouchEndOutside);
     window.removeEventListener("touchcancel", this.blurOnTouchEndOutside);
-    // @ts-expect-error - TS2769 - No overload matches this call.
-    window.removeEventListener("resize", this._clearKeypadBoundsCache());
-    window.removeEventListener("orientationchange",
-    // @ts-expect-error - TS2769 - No overload matches this call.
-    this._clearKeypadBoundsCache());
+    window.removeEventListener("click", this.blurOnClickOutside);
   }
-  _clearKeypadBoundsCache = () => {
-    this._keypadBounds = null;
-  };
-  _cacheKeypadBounds = keypadNode => {
-    this._keypadBounds = keypadNode.getBoundingClientRect();
-  };
   _updateInputPadding = () => {
     this._container = ReactDOM__default["default"].findDOMNode(this);
     this._root = this._container.querySelector(".mq-root-block");
@@ -1556,14 +1563,16 @@ class MathInput extends React__namespace.Component {
     this._root.style.fontSize = `${fontSizePt}pt`;
   };
 
-  /** Gets and cache they bounds of the keypadElement */
-  _getKeypadBounds = () => {
-    if (!this._keypadBounds) {
-      const node = this.props.keypadElement?.getDOMNode();
-      this._cacheKeypadBounds(node);
+  /** Returns the current bounds of the keypadElement */
+  _getKeypadBounds() {
+    const keypadNode = this.props.keypadElement?.getDOMNode();
+
+    // If the keypad is mounted, return its bounds. Otherwise, return null.
+    if (keypadNode instanceof Element) {
+      return keypadNode.getBoundingClientRect();
     }
-    return this._keypadBounds;
-  };
+    return null;
+  }
   _updateCursorHandle = animateIntoPosition => {
     const containerBounds = this._container.getBoundingClientRect();
     const cursor = this._container.querySelector(".mq-cursor");
@@ -1861,6 +1870,32 @@ class MathInput extends React__namespace.Component {
       this.focus();
     }
   };
+
+  // We want to allow the user to be able to focus the input via click
+  // when using ChromeOS third-party browsers that use mobile user agents,
+  // but don't actually simulate touch events.
+  handleClick = e => {
+    e.stopPropagation();
+
+    // Hide the cursor handle on click
+    this._hideCursorHandle();
+
+    // Cache the container bounds, so as to avoid re-computing. If we don't
+    // have any content, then it's not necessary, since the cursor can't be
+    // moved anyway.
+    if (this.mathField.getContent() !== "") {
+      this._containerBounds = this._container.getBoundingClientRect();
+
+      // Make the cursor visible and set the handle-less cursor's
+      // location.
+      this._insertCursorAtClosestNode(e.clientX, e.clientY);
+    }
+
+    // Trigger a focus event, if we're not already focused.
+    if (!this.state.focused) {
+      this.focus();
+    }
+  };
   handleTouchMove = e => {
     e.stopPropagation();
 
@@ -2084,7 +2119,7 @@ class MathInput extends React__namespace.Component {
       onTouchStart: this.handleTouchStart,
       onTouchMove: this.handleTouchMove,
       onTouchEnd: this.handleTouchEnd,
-      onClick: e => e.stopPropagation(),
+      onClick: this.handleClick,
       role: "textbox",
       ariaLabel: ariaLabel
     }, /*#__PURE__*/React__namespace.createElement("div", {