From 6fc1b5d1b5858a75daeaab8d95f75177cbf477a1 Mon Sep 17 00:00:00 2001
From: Jeffrey Carl Faden <jeffreyatw@gmail.com>
Date: Mon, 10 Jul 2023 12:53:33 -0700
Subject: [PATCH] Stop using defaultValue as it breaks Preact hydration

---
 src/routes/main/invitation/new/New.tsx | 20 ++++++++++++++++----
 src/routes/main/password/new/New.tsx   | 20 ++++++++++++++++----
 src/routes/main/users/new/New.tsx      | 20 ++++++++++++++++----
 3 files changed, 48 insertions(+), 12 deletions(-)

diff --git a/src/routes/main/invitation/new/New.tsx b/src/routes/main/invitation/new/New.tsx
index 86efb12c2..5adb3dcf2 100644
--- a/src/routes/main/invitation/new/New.tsx
+++ b/src/routes/main/invitation/new/New.tsx
@@ -1,4 +1,4 @@
-import React, { Component, RefObject, createRef } from "react";
+import React, { ChangeEvent, Component, RefObject, createRef } from "react";
 import withStyles from "isomorphic-style-loader/withStyles";
 import Button from "react-bootstrap/Button";
 import Col from "react-bootstrap/Col";
@@ -11,7 +11,11 @@ interface NewProps {
   email?: string;
 }
 
-class New extends Component<NewProps> {
+interface NewState {
+  email?: string;
+}
+
+class New extends Component<NewProps, NewState> {
   emailField: RefObject<HTMLInputElement>;
 
   static defaultProps = {
@@ -21,14 +25,21 @@ class New extends Component<NewProps> {
   constructor(props: NewProps) {
     super(props);
     this.emailField = createRef();
+
+    this.state = {
+      email: props.email,
+    };
   }
 
   componentDidMount() {
     this.emailField.current?.focus();
   }
 
+  handleChange = (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
+    this.setState({ email: event.currentTarget.value });
+
   render() {
-    const { email } = this.props;
+    const { email } = this.state;
 
     return (
       <div className={s.root}>
@@ -44,11 +55,12 @@ class New extends Component<NewProps> {
                 <Form.Group className="mb-3" controlId="invitationNew-email">
                   <Form.Label>Email</Form.Label>
                   <Form.Control
-                    defaultValue={email}
                     ref={this.emailField}
                     name="email"
+                    onChange={this.handleChange}
                     required
                     type="email"
+                    value={email}
                   />
                 </Form.Group>
               </Col>
diff --git a/src/routes/main/password/new/New.tsx b/src/routes/main/password/new/New.tsx
index d9b60c8ba..7b6e3e436 100644
--- a/src/routes/main/password/new/New.tsx
+++ b/src/routes/main/password/new/New.tsx
@@ -1,4 +1,4 @@
-import React, { Component, RefObject, createRef } from "react";
+import React, { ChangeEvent, Component, RefObject, createRef } from "react";
 import withStyles from "isomorphic-style-loader/withStyles";
 import Button from "react-bootstrap/Button";
 import Col from "react-bootstrap/Col";
@@ -11,7 +11,11 @@ interface NewProps {
   email?: string;
 }
 
-class New extends Component<NewProps> {
+interface NewState {
+  email?: string;
+}
+
+class New extends Component<NewProps, NewState> {
   emailField: RefObject<HTMLInputElement>;
 
   static defaultProps = {
@@ -21,14 +25,21 @@ class New extends Component<NewProps> {
   constructor(props: NewProps) {
     super(props);
     this.emailField = createRef();
+
+    this.state = {
+      email: props.email,
+    };
   }
 
   componentDidMount() {
     this.emailField.current?.focus();
   }
 
+  handleChange = (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
+    this.setState({ email: event.currentTarget.value });
+
   render() {
-    const { email } = this.props;
+    const { email } = this.state;
 
     return (
       <div className={s.root}>
@@ -44,11 +55,12 @@ class New extends Component<NewProps> {
                 <Form.Group className="mb-3" controlId="passwordNew-email">
                   <Form.Label>Email</Form.Label>
                   <Form.Control
-                    defaultValue={email}
                     ref={this.emailField}
                     name="email"
+                    onChange={this.handleChange}
                     required
                     type="email"
+                    value={email}
                   />
                 </Form.Group>
               </Col>
diff --git a/src/routes/main/users/new/New.tsx b/src/routes/main/users/new/New.tsx
index e7c16ae13..34e86e7db 100644
--- a/src/routes/main/users/new/New.tsx
+++ b/src/routes/main/users/new/New.tsx
@@ -1,4 +1,4 @@
-import React, { Component, RefObject, createRef } from "react";
+import React, { ChangeEvent, Component, RefObject, createRef } from "react";
 import withStyles from "isomorphic-style-loader/withStyles";
 import Button from "react-bootstrap/Button";
 import Col from "react-bootstrap/Col";
@@ -11,7 +11,11 @@ interface NewProps {
   email?: string;
 }
 
-class New extends Component<NewProps> {
+interface NewState {
+  email?: string;
+}
+
+class New extends Component<NewProps, NewState> {
   emailField: RefObject<HTMLInputElement>;
 
   static defaultProps = {
@@ -21,14 +25,21 @@ class New extends Component<NewProps> {
   constructor(props: NewProps) {
     super(props);
     this.emailField = createRef();
+
+    this.state = {
+      email: props.email,
+    };
   }
 
   componentDidMount() {
     this.emailField.current?.focus();
   }
 
+  handleChange = (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
+    this.setState({ email: event.currentTarget.value });
+
   render() {
-    const { email } = this.props;
+    const { email } = this.state;
 
     return (
       <div className={s.root}>
@@ -44,11 +55,12 @@ class New extends Component<NewProps> {
                 <Form.Group className="mb-3" controlId="usersNew-email">
                   <Form.Label>Email</Form.Label>
                   <Form.Control
-                    defaultValue={email}
                     ref={this.emailField}
                     name="email"
+                    onChange={this.handleChange}
                     required
                     type="email"
+                    value={email}
                   />
                 </Form.Group>
               </Col>