@khanacademy/math-input 16.1.1 → 16.2.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @khanacademy/math-input
 
+## 16.2.0
+
+### Minor Changes
+
+-   [#853](https://github.com/Khan/perseus/pull/853) [`cbcc0e68`](https://github.com/Khan/perseus/commit/cbcc0e689b6d4640361c14ae112c476fb061d5f4) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Allowing click events on math-input in order to support third party browsers on ChromeOS.
+
+*   [#859](https://github.com/Khan/perseus/pull/859) [`e7bec961`](https://github.com/Khan/perseus/commit/e7bec961bc5136bcaeb4ebb4b6744b0809f372ec) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Ensure that we're always getting the current keypadBounds
+
+## 16.1.2
+
+### Patch Changes
+
+-   [#856](https://github.com/Khan/perseus/pull/856) [`6c323dc3`](https://github.com/Khan/perseus/commit/6c323dc37e7cc972fe5a1ab7cbf90a23bf4dd3a0) Thanks [@nedredmond](https://github.com/nedredmond)! - Upgrade WB
+
+*   [#804](https://github.com/Khan/perseus/pull/804) [`2c295e2c`](https://github.com/Khan/perseus/commit/2c295e2c26ff2bf15e1e8e82bcc34e04e4b9bab0) Thanks [@nixterrimus](https://github.com/nixterrimus)! - Upgrade WonderBlocks Popover
+
+*   Updated dependencies [[`1f4e17ba`](https://github.com/Khan/perseus/commit/1f4e17ba77e1491523813655af18a70285a25989), [`8857950b`](https://github.com/Khan/perseus/commit/8857950bdeeb6e13bc3766b1c6545289b21cbe2a)]:
+    -   @khanacademy/perseus-core@1.4.1
+
 ## 16.1.1
 
 ### Patch Changes

package/dist/components/input/math-input.d.ts

@@ -28,6 +28,7 @@ declare class MathInput extends React.Component<Props, State> {
     mathField: any;
     recordTouchStartOutside: (arg1: any) => void;
     blurOnTouchEndOutside: (arg1: any) => void;
+    blurOnClickOutside: (arg1: any) => void;
     dragListener: any;
     inputRef: HTMLDivElement | null | undefined;
     _isMounted: boolean | null | undefined;
@@ -35,18 +36,14 @@ declare class MathInput extends React.Component<Props, State> {
     _container: HTMLDivElement;
     _root: any;
     _containerBounds: ClientRect;
-    _keypadBounds: ClientRect | null | undefined;
     static defaultProps: DefaultProps;
     state: State;
     componentDidMount(): void;
-    UNSAFE_componentWillReceiveProps(props: Props): void;
     componentDidUpdate(prevProps: Props, prevState: State): void;
     componentWillUnmount(): void;
-    _clearKeypadBoundsCache: () => void;
-    _cacheKeypadBounds: (arg1: any) => void;
     _updateInputPadding: () => void;
-    /** Gets and cache they bounds of the keypadElement */
-    _getKeypadBounds: () => any;
+    /** Returns the current bounds of the keypadElement */
+    _getKeypadBounds(): DOMRect | null;
     _updateCursorHandle: (arg1?: boolean) => void;
     _hideCursorHandle: () => void;
     _handleScroll: () => void;
@@ -86,6 +83,7 @@ declare class MathInput extends React.Component<Props, State> {
      */
     _insertCursorAtClosestNode: (arg1: number, arg2: number) => void;
     handleTouchStart: (arg1: React.TouchEvent<HTMLDivElement>) => void;
+    handleClick: (e: React.MouseEvent<HTMLDivElement>) => void;
     handleTouchMove: (arg1: React.TouchEvent<HTMLDivElement>) => void;
     handleTouchEnd: (arg1: React.TouchEvent<HTMLDivElement>) => void;
     /**

package/dist/es/index.js

@@ -17,7 +17,7 @@ import PropTypes from 'prop-types';
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/math-input";
-const libVersion = "16.1.1";
+const libVersion = "16.2.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -1369,6 +1369,8 @@ class MathInput extends React.Component {
     this.recordTouchStartOutside = void 0;
     // @ts-expect-error - TS2564 - Property 'blurOnTouchEndOutside' has no initializer and is not definitely assigned in the constructor.
     this.blurOnTouchEndOutside = void 0;
+    // @ts-expect-error - TS2564 - Property 'blurOnClickOutside' has no initializer and is not definitely assigned in the constructor.
+    this.blurOnClickOutside = void 0;
     this.dragListener = void 0;
     this.inputRef = void 0;
     this._isMounted = void 0;
@@ -1378,7 +1380,6 @@ class MathInput extends React.Component {
     this._root = void 0;
     // @ts-expect-error - TS2564 - Property '_containerBounds' has no initializer and is not definitely assigned in the constructor.
     this._containerBounds = void 0;
-    this._keypadBounds = void 0;
     this.state = {
       focused: false,
       handle: {
@@ -1388,12 +1389,6 @@ class MathInput extends React.Component {
         y: 0
       }
     };
-    this._clearKeypadBoundsCache = () => {
-      this._keypadBounds = null;
-    };
-    this._cacheKeypadBounds = keypadNode => {
-      this._keypadBounds = keypadNode.getBoundingClientRect();
-    };
     this._updateInputPadding = () => {
       this._container = ReactDOM.findDOMNode(this);
       this._root = this._container.querySelector(".mq-root-block");
@@ -1402,15 +1397,6 @@ class MathInput extends React.Component {
       this._root.style.padding = `${padding.paddingTop}px ${padding.paddingRight}px` + ` ${padding.paddingBottom}px ${padding.paddingLeft}px`;
       this._root.style.fontSize = `${fontSizePt}pt`;
     };
-    /** Gets and cache they bounds of the keypadElement */
-    this._getKeypadBounds = () => {
-      if (!this._keypadBounds) {
-        var _this$props$keypadEle;
-        const node = (_this$props$keypadEle = this.props.keypadElement) == null ? void 0 : _this$props$keypadEle.getDOMNode();
-        this._cacheKeypadBounds(node);
-      }
-      return this._keypadBounds;
-    };
     this._updateCursorHandle = animateIntoPosition => {
       const containerBounds = this._container.getBoundingClientRect();
       const cursor = this._container.querySelector(".mq-cursor");
@@ -1470,10 +1456,10 @@ class MathInput extends React.Component {
       });
     };
     this.focus = () => {
-      var _this$props$keypadEle2, _this$props;
+      var _this$props$keypadEle, _this$props;
       // Pass this component's handleKey method to the keypad so it can call
       // it whenever it needs to trigger a keypress action.
-      (_this$props$keypadEle2 = this.props.keypadElement) == null || _this$props$keypadEle2.setKeyHandler(key => {
+      (_this$props$keypadEle = this.props.keypadElement) == null || _this$props$keypadEle.setKeyHandler(key => {
         const cursor = this.mathField.pressKey(key);
 
         // Trigger an `onChange` if the value in the input changed, and hide
@@ -1506,14 +1492,14 @@ class MathInput extends React.Component {
         // Android Browser 4.3.
         setTimeout(() => {
           if (this._isMounted) {
-            var _this$props$keypadEle3;
+            var _this$props$keypadEle2;
             // TODO(benkomalo): the keypad is animating at this point,
             // so we can't call _cacheKeypadBounds(), even though
             // it'd be nice to do so. It should probably be the case
             // that the higher level controller tells us when the
             // keypad is settled (then scrollIntoView wouldn't have
             // to make assumptions about that either).
-            const maybeKeypadNode = (_this$props$keypadEle3 = this.props.keypadElement) == null ? void 0 : _this$props$keypadEle3.getDOMNode();
+            const maybeKeypadNode = (_this$props$keypadEle2 = this.props.keypadElement) == null ? void 0 : _this$props$keypadEle2.getDOMNode();
             scrollIntoView(this._container, maybeKeypadNode);
           }
         });
@@ -1708,6 +1694,31 @@ class MathInput extends React.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.
+    this.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();
+      }
+    };
     this.handleTouchMove = e => {
       e.stopPropagation();
 
@@ -1927,6 +1938,16 @@ class MathInput extends React.Component {
     this._container = ReactDOM.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
@@ -1944,10 +1965,9 @@ class MathInput extends React.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;
               }
@@ -1983,25 +2003,31 @@ class MathInput extends React.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) {
@@ -2016,11 +2042,18 @@ class MathInput extends React.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);
+  }
+  /** Returns the current bounds of the keypadElement */
+  _getKeypadBounds() {
+    var _this$props$keypadEle3;
+    const keypadNode = (_this$props$keypadEle3 = this.props.keypadElement) == null ? void 0 : _this$props$keypadEle3.getDOMNode();
+
+    // If the keypad is mounted, return its bounds. Otherwise, return null.
+    if (keypadNode instanceof Element) {
+      return keypadNode.getBoundingClientRect();
+    }
+    return null;
   }
   render() {
     const {
@@ -2049,7 +2082,7 @@ class MathInput extends React.Component {
       onTouchStart: this.handleTouchStart,
       onTouchMove: this.handleTouchMove,
       onTouchEnd: this.handleTouchEnd,
-      onClick: e => e.stopPropagation(),
+      onClick: this.handleClick,
       role: "textbox",
       ariaLabel: ariaLabel
     }, /*#__PURE__*/React.createElement("div", {