From 5352d512cc0b431301692f1872ab8fa542fce034 Mon Sep 17 00:00:00 2001
From: Matthew <matthewcurtis@khanacademy.org>
Date: Mon, 21 Aug 2023 17:08:18 -0500
Subject: [PATCH] Add ResizeObserver for legacy keypad (#679)

* add resize observer

* quiet error

* changeset

* mock ResizeObserver for failing test
---
 .changeset/nine-guests-sneeze.md                       |  5 +++++
 .../src/components/keypad-legacy/keypad-container.tsx  | 10 ++++++++++
 packages/perseus/src/__tests__/item-renderer.test.tsx  |  7 +++++++
 3 files changed, 22 insertions(+)
 create mode 100644 .changeset/nine-guests-sneeze.md

diff --git a/.changeset/nine-guests-sneeze.md b/.changeset/nine-guests-sneeze.md
new file mode 100644
index 0000000000..f9c032e4eb
--- /dev/null
+++ b/.changeset/nine-guests-sneeze.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/math-input": minor
+---
+
+Handle keypad resize better when it's positioned absolutely
diff --git a/packages/math-input/src/components/keypad-legacy/keypad-container.tsx b/packages/math-input/src/components/keypad-legacy/keypad-container.tsx
index 7065bd0527..ea8a8fd7af 100644
--- a/packages/math-input/src/components/keypad-legacy/keypad-container.tsx
+++ b/packages/math-input/src/components/keypad-legacy/keypad-container.tsx
@@ -51,6 +51,7 @@ type State = {
 // eslint-disable-next-line react/no-unsafe
 class KeypadContainer extends React.Component<Props, State> {
     _containerRef = React.createRef<HTMLDivElement>();
+    _containerResizeObserver: ResizeObserver | null = null;
     _resizeTimeout: number | null | undefined;
     hasMounted: boolean | undefined;
 
@@ -77,6 +78,14 @@ class KeypadContainer extends React.Component<Props, State> {
             "orientationchange",
             this._throttleResizeHandler,
         );
+
+        this._containerResizeObserver = new ResizeObserver(
+            this._throttleResizeHandler,
+        );
+
+        if (this._containerRef.current) {
+            this._containerResizeObserver.observe(this._containerRef.current);
+        }
     }
 
     UNSAFE_componentWillReceiveProps(nextProps) {
@@ -99,6 +108,7 @@ class KeypadContainer extends React.Component<Props, State> {
             "orientationchange",
             this._throttleResizeHandler,
         );
+        this._containerResizeObserver?.disconnect();
     }
 
     _throttleResizeHandler = () => {
diff --git a/packages/perseus/src/__tests__/item-renderer.test.tsx b/packages/perseus/src/__tests__/item-renderer.test.tsx
index ec6024e646..0a2f10a5a8 100644
--- a/packages/perseus/src/__tests__/item-renderer.test.tsx
+++ b/packages/perseus/src/__tests__/item-renderer.test.tsx
@@ -132,6 +132,13 @@ describe("item renderer", () => {
     });
 
     beforeEach(() => {
+        // Mock ResizeObserver used by the mobile keypad
+        window.ResizeObserver = jest.fn().mockImplementation(() => ({
+            observe: jest.fn(),
+            unobserve: jest.fn(),
+            disconnect: jest.fn(),
+        }));
+
         jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
             testDependencies,
         );