@khanacademy/math-input 16.1.2 → 16.2.0

package/package.json

@@ -3,7 +3,7 @@
     "description": "Khan Academy's new expression editor for the mobile web.",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "16.1.2",
+    "version": "16.2.0",
     "publishConfig": {
         "access": "public"
     },

package/src/components/__tests__/integration.test.tsx

@@ -99,7 +99,7 @@ describe("math input integration", () => {
         ).not.toBeInTheDocument();
     });
 
-    it("shows the keypad after input interaction", async () => {
+    it("shows the keypad after input touch-interaction", async () => {
         render(<ConnectedMathInput />);
 
         const input = screen.getByLabelText(
@@ -115,6 +115,22 @@ describe("math input integration", () => {
         expect(screen.getByRole("button", {name: "1"})).toBeVisible();
     });
 
+    it("shows the keypad after input click-interaction", async () => {
+        render(<ConnectedMathInput />);
+
+        const input = screen.getByLabelText(
+            "Math input box Tap with one or two fingers to open keyboard",
+        );
+
+        userEvent.click(input);
+
+        await waitFor(() => {
+            expect(screen.getByRole("button", {name: "4"})).toBeVisible();
+        });
+
+        expect(screen.getByRole("button", {name: "1"})).toBeVisible();
+    });
+
     it("updates input when using keypad", async () => {
         render(<ConnectedMathInput />);
 

package/src/components/input/math-input.tsx

@@ -56,6 +56,8 @@ class MathInput extends React.Component<Props, State> {
     recordTouchStartOutside: (arg1: any) => void;
     // @ts-expect-error - TS2564 - Property 'blurOnTouchEndOutside' has no initializer and is not definitely assigned in the constructor.
     blurOnTouchEndOutside: (arg1: any) => void;
+    // @ts-expect-error - TS2564 - Property 'blurOnClickOutside' has no initializer and is not definitely assigned in the constructor.
+    blurOnClickOutside: (arg1: any) => void;
     dragListener: any;
     inputRef: HTMLDivElement | null | undefined;
     _isMounted: boolean | null | undefined;
@@ -65,7 +67,6 @@ class MathInput extends React.Component<Props, State> {
     _root: any;
     // @ts-expect-error - TS2564 - Property '_containerBounds' has no initializer and is not definitely assigned in the constructor.
     _containerBounds: ClientRect;
-    _keypadBounds: ClientRect | null | undefined;
 
     static defaultProps: DefaultProps = {
         style: {},
@@ -120,6 +121,24 @@ class MathInput extends React.Component<Props, State> {
         this._root = this._container.querySelector(".mq-root-block");
         this._root.addEventListener("scroll", this._handleScroll);
 
+        const isWithinKeypadBounds = (x: number, y: number): boolean => {
+            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
         // input on non-scrolls--blurring the input on scroll makes for a
@@ -139,19 +158,12 @@ class MathInput extends React.Component<Props, State> {
                         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;
                             }
@@ -194,28 +206,34 @@ class MathInput extends React.Component<Props, State> {
             }
         };
 
+        // 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: any) => {
+            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: Props) {
-        if (this.props.keypadElement !== props.keypadElement) {
-            this._clearKeypadBoundsCache();
-        }
+        window.addEventListener("click", this.blurOnClickOutside);
     }
 
     componentDidUpdate(prevProps: Props, prevState: State) {
@@ -234,23 +252,9 @@ class MathInput extends React.Component<Props, State> {
         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: () => void = () => {
-        this._keypadBounds = null;
-    };
-
-    _cacheKeypadBounds: (arg1: any) => void = (keypadNode) => {
-        this._keypadBounds = keypadNode.getBoundingClientRect();
-    };
-
     _updateInputPadding: () => void = () => {
         this._container = ReactDOM.findDOMNode(this) as HTMLDivElement;
         this._root = this._container.querySelector(".mq-root-block");
@@ -263,14 +267,17 @@ class MathInput extends React.Component<Props, State> {
         this._root.style.fontSize = `${fontSizePt}pt`;
     };
 
-    /** Gets and cache they bounds of the keypadElement */
-    _getKeypadBounds: () => any = () => {
-        if (!this._keypadBounds) {
-            const node = this.props.keypadElement?.getDOMNode();
-            this._cacheKeypadBounds(node);
+    /** Returns the current bounds of the keypadElement */
+    _getKeypadBounds(): DOMRect | null {
+        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: (arg1?: boolean) => void = (animateIntoPosition) => {
         const containerBounds = this._container.getBoundingClientRect();
@@ -624,6 +631,32 @@ class MathInput extends React.Component<Props, State> {
         }
     };
 
+    // 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: React.MouseEvent<HTMLDivElement>): void => {
+        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: (arg1: React.TouchEvent<HTMLDivElement>) => void = (e) => {
         e.stopPropagation();
 
@@ -898,7 +931,7 @@ class MathInput extends React.Component<Props, State> {
                 onTouchStart={this.handleTouchStart}
                 onTouchMove={this.handleTouchMove}
                 onTouchEnd={this.handleTouchEnd}
-                onClick={(e) => e.stopPropagation()}
+                onClick={this.handleClick}
                 role={"textbox"}
                 ariaLabel={ariaLabel}
             >