[cleaning-the-perseus-finddom] Initial cleanup

SonicScrewdriver · SonicScrewdriver · commit 4ee964098fe9 · 2025-08-05T16:34:53.000-07:00
diff --git a/packages/perseus/src/renderer.tsx b/packages/perseus/src/renderer.tsx
@@ -17,7 +17,6 @@ import {
 } from "@khanacademy/perseus-score";
 import {entries} from "@khanacademy/wonder-stuff-core";
 import classNames from "classnames";
-import $ from "jquery";
 import * as React from "react";
 import ReactDOM from "react-dom";
 import _ from "underscore";
@@ -311,9 +310,6 @@ class Renderer
     componentDidMount() {
         this._isMounted = true;
 
-        // figure out why we're passing an empty object
-        // @ts-expect-error - TS2345 - Argument of type '{}' is not assignable to parameter of type 'Props'.
-        this.handleRender({});
         this._currentFocus = null;
 
         this.props.initializeUserInput?.(
@@ -423,7 +419,6 @@ class Renderer
     }
 
     componentDidUpdate(prevProps: Props, prevState: State) {
-        this.handleRender(prevProps);
         // We even do this if we did reuse the markdown because
         // we might need to update the widget props on this render,
         // even though we have the same widgets.
@@ -1421,29 +1416,6 @@ class Renderer
         );
     };
 
-    handleRender: (prevProps: Props) => void = (prevProps: Props) => {
-        const onRender = this.props.onRender;
-        const oldOnRender = prevProps.onRender;
-
-        // In the common case of no callback specified, avoid this work.
-        if (onRender !== noopOnRender || oldOnRender !== noopOnRender) {
-            // @ts-expect-error - TS2769 - No overload matches this call. | TS2339 - Property 'find' does not exist on type 'JQueryStatic'.
-            const $images = $(ReactDOM.findDOMNode(this)).find("img");
-
-            // Fire callback on image load...
-            if (oldOnRender !== noopOnRender) {
-                $images.off("load", oldOnRender);
-            }
-
-            if (onRender !== noopOnRender) {
-                $images.on("load", onRender);
-            }
-        }
-
-        // ...as well as right now (non-image, non-TeX or image from cache)
-        onRender();
-    };
-
     // Sets the current focus path
     // If the new focus path is not a prefix of the old focus path,
     // we send an onChangeFocus event back to our parent.
diff --git a/packages/perseus/src/widgets/matrix/matrix.tsx b/packages/perseus/src/widgets/matrix/matrix.tsx
@@ -115,6 +115,7 @@ type State = {
 class Matrix extends React.Component<Props, State> implements Widget {
     static contextType = PerseusI18nContext;
     declare context: React.ContextType<typeof PerseusI18nContext>;
+    answerRefs: Record<string, SimpleKeypadInput | HTMLInputElement> = {};
 
     // @ts-expect-error - TS2564 - Property 'cursorPosition' has no initializer and is not definitely assigned in the constructor.
     cursorPosition: [number, number];
@@ -170,9 +171,8 @@ class Matrix extends React.Component<Props, State> implements Widget {
 
     focusInputPath: (arg1: any) => void = (path) => {
         const inputID = getRefForPath(path);
-        // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
-        this.refs[inputID].focus();
+        const inputComponent = this.answerRefs[inputID];
+        inputComponent.focus();
     };
 
     blurInputPath: (arg1: any) => void = (path) => {
@@ -181,15 +181,19 @@ class Matrix extends React.Component<Props, State> implements Widget {
         }
 
         const inputID = getRefForPath(path);
-        // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error - TS2339 - Property 'blur' does not exist on type 'ReactInstance'.
-        this.refs[inputID].blur();
+        const inputComponent = this.answerRefs[inputID];
+        inputComponent.blur();
     };
 
     getDOMNodeForPath(path: FocusPath) {
         const inputID = getRefForPath(path);
-        // eslint-disable-next-line react/no-string-refs
-        return ReactDOM.findDOMNode(this.refs[inputID]);
+        const inputRef = this.answerRefs[inputID];
+        if (this.props.apiOptions.customKeypad) {
+            // This is a SimpleKeypadInput, so we need to find the DOM node
+            return ReactDOM.findDOMNode(inputRef);
+        } else {
+            return inputRef as HTMLInputElement;
+        }
     }
 
     handleKeyDown: (arg1: any, arg2: any, arg3: any) => void = (
@@ -377,9 +381,13 @@ class Matrix extends React.Component<Props, State> implements Widget {
                                         className: outside
                                             ? "outside"
                                             : "inside",
-                                        ref: getRefForPath(
-                                            getInputPath(row, col),
-                                        ),
+                                        ref: (ref) => {
+                                            this.answerRefs[
+                                                getRefForPath(
+                                                    getInputPath(row, col),
+                                                )
+                                            ] = ref;
+                                        },
                                         // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
                                         value: rowVals ? rowVals[col] : null,
                                         style: {
diff --git a/packages/perseus/src/widgets/number-line/number-line.tsx b/packages/perseus/src/widgets/number-line/number-line.tsx
@@ -247,6 +247,8 @@ class NumberLine extends React.Component<Props, State> implements Widget {
     static contextType = PerseusI18nContext;
     declare context: React.ContextType<typeof PerseusI18nContext>;
 
+    tickControlRef: SimpleKeypadInput | HTMLInputElement | null = null;
+
     static defaultProps: DefaultProps = {
         range: [0, 10],
         labelStyle: "decimal",
@@ -346,27 +348,21 @@ class NumberLine extends React.Component<Props, State> implements Widget {
 
     focus() {
         if (this.props.isTickCtrl) {
-            // eslint-disable-next-line react/no-string-refs
-            // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
-            this.refs["tick-ctrl"].focus();
+            this.tickControlRef?.focus();
             return true;
         }
         return false;
     }
 
     focusInputPath: (arg1: any) => void = (path) => {
         if (path.length === 1) {
-            // eslint-disable-next-line react/no-string-refs
-            // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
-            this.refs[path[0]].focus();
+            this.tickControlRef?.focus();
         }
     };
 
     blurInputPath: (arg1: any) => void = (path) => {
         if (path.length === 1) {
-            // eslint-disable-next-line react/no-string-refs
-            // @ts-expect-error - TS2339 - Property 'blur' does not exist on type 'ReactInstance'.
-            this.refs[path[0]].blur();
+            this.tickControlRef?.blur();
         }
     };
 
@@ -379,8 +375,7 @@ class NumberLine extends React.Component<Props, State> implements Widget {
 
     getDOMNodeForPath(inputPath: FocusPath) {
         if (inputPath?.length === 1) {
-            // eslint-disable-next-line react/no-string-refs
-            return ReactDOM.findDOMNode(this.refs[inputPath[0]]);
+            return ReactDOM.findDOMNode(this.tickControlRef);
         }
         return null;
     }
@@ -679,8 +674,9 @@ class NumberLine extends React.Component<Props, State> implements Widget {
                 <label>
                     {strings.numDivisions}{" "}
                     <Input
-                        // eslint-disable-next-line react/no-string-refs
-                        ref="tick-ctrl"
+                        ref={(ref) => {
+                            this.tickControlRef = ref;
+                        }}
                         value={
                             this.state.numDivisionsEmpty
                                 ? null
diff --git a/packages/perseus/src/widgets/table/table.tsx b/packages/perseus/src/widgets/table/table.tsx
@@ -1,6 +1,6 @@
 import {linterContextDefault} from "@khanacademy/perseus-linter";
 import * as React from "react";
-import ReactDOM from "react-dom";
+import {findDOMNode} from "react-dom";
 
 import {PerseusI18nContext} from "../../components/i18n-context";
 import SimpleKeypadInput from "../../components/simple-keypad-input";
@@ -16,6 +16,7 @@ import type {
     PerseusTableWidgetOptions,
     PerseusTableUserInput,
 } from "@khanacademy/perseus-core";
+import type ReactDOM from "react-dom";
 
 const {assert} = InteractiveUtil;
 
@@ -76,7 +77,7 @@ class Table extends React.Component<Props> implements Widget {
     static contextType = PerseusI18nContext;
     declare context: React.ContextType<typeof PerseusI18nContext>;
     headerRefs: Record<string, any> = {};
-    answerRefs: Record<string, any> = {};
+    answerRefs: Record<string, SimpleKeypadInput | HTMLInputElement> = {};
 
     static defaultProps: DefaultProps = {
         apiOptions: ApiOptions.defaults,
@@ -138,31 +139,26 @@ class Table extends React.Component<Props> implements Widget {
     focusInputPath(path: FocusPath): void {
         const inputID = getRefForPath(path as Path);
         const inputComponent = this.answerRefs[inputID];
-        if (this.props.apiOptions.customKeypad) {
-            inputComponent.focus();
-        } else {
-            // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'focus' does not exist on type 'Element | Text'.
-            ReactDOM.findDOMNode(inputComponent).focus();
-        }
+        inputComponent.focus();
     }
 
     blurInputPath(path: FocusPath): void {
         const inputID = getRefForPath(path as Path);
         const inputComponent = this.answerRefs[inputID];
-        if (this.props.apiOptions.customKeypad) {
-            inputComponent.blur();
-        } else {
-            // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'blur' does not exist on type 'Element | Text'.
-            ReactDOM.findDOMNode(inputComponent).blur();
-        }
+        inputComponent.blur();
     }
 
     getDOMNodeForPath(
         path: FocusPath,
     ): ReturnType<typeof ReactDOM.findDOMNode> {
         const inputID = getRefForPath(path as Path);
         const inputRef = this.answerRefs[inputID];
-        return ReactDOM.findDOMNode(inputRef);
+
+        if (this.props.apiOptions.customKeypad) {
+            return findDOMNode(inputRef);
+        } else {
+            return inputRef as HTMLInputElement;
+        }
     }
 
     getInputPaths(): string[][] {
