update: upgrade to the newest version of antd, which is a good step in preparation for React 18.

Author: williamstein

src/packages/frontend/admin/site-settings.tsx

@@ -42,11 +42,7 @@ import { isEqual } from "lodash";
 
 import { COLORS } from "@cocalc/util/theme";
 
-// Commented out since Select via antd is broken now,
-// at least when used here...
-// import { Select } from "antd";
-// const { Option } = Select;
-import { Input } from "antd";
+import { Input, InputRef } from "antd";
 
 import {
   CopyToClipBoard,
@@ -78,10 +74,13 @@ class SiteSettingsComponent extends Component<
   SiteSettingsProps,
   SiteSettingsState
 > {
+  private testEmailRef: React.RefObject<InputRef>;
+
   constructor(props, state) {
     super(props, state);
     this.on_json_entry_change = this.on_json_entry_change.bind(this);
     this.on_change_entry = this.on_change_entry.bind(this);
+    this.testEmailRef = React.createRef();
     this.state = { state: "view", disable_tests: false };
   }
 
@@ -571,9 +570,18 @@ class SiteSettingsComponent extends Component<
   private async send_test_email(
     type: "password_reset" | "invite_email" | "mention" | "verification"
   ): Promise<void> {
-    const email = ReactDOM.findDOMNode(this.refs.test_email)?.value;
-    if (email == null) return;
-    console.log(`sending test email "${type}" to ${email}`);
+    const email = this.testEmailRef.current?.input?.value;
+    if (!email) {
+      alert_message({
+        type: "error",
+        message: "NOT sending test email, since email field is empty",
+      });
+      return;
+    }
+    alert_message({
+      type: "info",
+      message: `sending test email "${type}" to ${email}`,
+    });
     // saving info
     await this.store();
     this.setState({ disable_tests: true });
@@ -622,14 +630,15 @@ class SiteSettingsComponent extends Component<
         <Input
           style={{ width: "auto" }}
           defaultValue={this.props.email_address}
-          ref={"test_email"}
+          ref={this.testEmailRef}
         />
         <Button
+          style={{ marginLeft: "10px" }}
           bsSize={"small"}
           disabled={this.state.disable_tests}
           onClick={() => this.send_test_email("password_reset")}
         >
-          Forgot Password
+          Send Test Forgot Password Email
         </Button>
         {
           // <Button

src/packages/frontend/components/number-input.tsx

@@ -58,7 +58,6 @@ export class NumberInput extends React.Component<Props, State> {
         <Col xs={16}>
           <Input
             type="text"
-            ref="input"
             value={
               this.state.number != undefined
                 ? this.state.number

src/packages/frontend/components/search-input.tsx

@@ -9,11 +9,10 @@
    - `esc` to clear
 */
 
-import { Input } from "antd";
+import { Input, InputRef } from "antd";
 import { Button } from "../antd-bootstrap";
-//import { , FormGroup, InputGroup, FormControl } from "../antd-bootstrap";
 import { Icon } from "./icon";
-import { React, ReactDOM, useEffect, useState, useRef } from "../app-framework";
+import { React, useEffect, useState, useRef } from "../app-framework";
 
 interface Props {
   default_value?: string;
@@ -44,20 +43,18 @@ export const SearchInput: React.FC<Props> = React.memo((props) => {
 
   const [ctrl_down, set_ctrl_down] = useState<boolean>(false);
 
-  const input_ref = useRef(null);
+  const input_ref = useRef<InputRef>(null);
 
   useEffect(() => {
     if (props.autoSelect && input_ref.current) {
       try {
-        ReactDOM.findDOMNode(input_ref.current).select();
+        input_ref.current?.select();
       } catch (_) {}
     }
   }, []);
 
   useEffect(() => {
-    if (input_ref.current) {
-      ReactDOM.findDOMNode(input_ref.current).focus();
-    }
+    input_ref.current?.focus();
   }, [focus]);
 
   function get_opts(): { ctrl_down: boolean } {
@@ -72,7 +69,7 @@ export const SearchInput: React.FC<Props> = React.memo((props) => {
 
   function clear_and_focus_search_input(): void {
     clear_value();
-    ReactDOM.findDOMNode(input_ref.current)?.focus();
+    input_ref.current?.focus();
   }
 
   function search_button(): JSX.Element {