Add ResizeObserver for legacy keypad (#679)

* add resize observer

* quiet error

* changeset

* mock ResizeObserver for failing test

.changeset/nine-guests-sneeze.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/math-input": minor
+---
+
+Handle keypad resize better when it's positioned absolutely

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 = () => {

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,
         );