[CORL-1129] Form initialization and reset bug (#2991)

* fix: form initialization and reset bug

* fix: test

Co-authored-by: Wyatt Johnson <wyattjoh@gmail.com>

package-lock.json

@@ -34310,7 +34310,7 @@
         },
         "chalk": {
           "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
           "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
           "dev": true,
           "requires": {

src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyCommentFormContainer.tsx

@@ -26,6 +26,7 @@ import {
   SubmitStatus,
 } from "../../helpers";
 import RefreshSettingsFetch from "../../RefreshSettingsFetch";
+import { RTE_RESET_VALUE } from "../../RTE/RTE";
 import ReplyEditSubmitStatus from "../ReplyEditSubmitStatus";
 import {
   CreateCommentReplyMutation,
@@ -155,7 +156,7 @@ export class ReplyCommentFormContainer extends Component<Props, State> {
     }
     // Reset errors whenever user clears the form.
     if (state.touched && state.touched.body && !state.values.body) {
-      form.reset({});
+      form.reset({ body: RTE_RESET_VALUE });
     }
   };
 

src/core/client/stream/tabs/Comments/RTE/RTE.tsx

@@ -24,6 +24,8 @@ import { PropTypesOf } from "coral-ui/types";
 
 import styles from "./RTE.css";
 
+export const RTE_RESET_VALUE = "<div><br></div>";
+
 interface RTEFeatures {
   bold?: boolean;
   italic?: boolean;

src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentFormContainer.spec.tsx

@@ -8,6 +8,7 @@ import { createPromisifiedStorage } from "coral-framework/lib/storage";
 import { act, removeFragmentRefs, wait } from "coral-framework/testHelpers";
 import { DeepPartial, PropTypesOf } from "coral-framework/types";
 
+import { RTE_RESET_VALUE } from "../../RTE/RTE";
 import { PostCommentFormContainer } from "./PostCommentFormContainer";
 
 const contextKey = "postCommentFormBody";
@@ -126,7 +127,7 @@ it("creates a comment", async () => {
   const createCommentStub = sinon.stub().returns({ edge: { node: {} } });
   const form = { initialize: noop };
   const formMock = sinon.mock(form);
-  formMock.expects("initialize").withArgs({}).once();
+  formMock.expects("initialize").withArgs({ body: RTE_RESET_VALUE }).once();
 
   const props = createDefaultProps({
     createComment: createCommentStub,

src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentFormContainer.tsx

@@ -34,6 +34,7 @@ import {
   SubmitStatus,
 } from "../../helpers";
 import RefreshSettingsFetch from "../../RefreshSettingsFetch";
+import { RTE_RESET_VALUE } from "../../RTE/RTE";
 import {
   CreateCommentMutation,
   withCreateCommentMutation,
@@ -134,7 +135,7 @@ export class PostCommentFormContainer extends Component<Props, State> {
         })
       );
       if (submitStatus !== "RETRY") {
-        form.initialize({});
+        form.initialize({ body: RTE_RESET_VALUE });
       }
       this.setState({ submitStatus, nudge: true });
     } catch (error) {
@@ -163,14 +164,7 @@ export class PostCommentFormContainer extends Component<Props, State> {
     state,
     form
   ) => {
-    if (
-      this.state.submitStatus &&
-      state.dirty &&
-      // This is required because the body is somehow being "dirtied" once the
-      // form has been reinitialized.
-      // FIXME: (wyattjoh) discover why when a comment is submitted, it eventually sets this as the body afterwards
-      state.values.body !== "<div><br></div>"
-    ) {
+    if (this.state.submitStatus && state.dirty) {
       this.setState({ submitStatus: null });
     }
     if (state.values.body) {
@@ -181,7 +175,7 @@ export class PostCommentFormContainer extends Component<Props, State> {
 
     // Reset errors whenever user clears the form.
     if (state.touched && state.touched.body && !state.values.body) {
-      form.reset({});
+      form.reset({ body: RTE_RESET_VALUE });
     }
   };