fix(form): fixed floating label behavior for TextArea

Also wrote a sanity check for the `NativeSelect` component

Closes #1043

Author: mlaursen

packages/form/src/select/__tests__/NativeSelect.tsx

@@ -1,5 +1,5 @@
-import React from "react";
-import { render } from "@testing-library/react";
+import React, { ReactElement, useState } from "react";
+import { fireEvent, render } from "@testing-library/react";
 
 import { NativeSelect } from "../NativeSelect";
 
@@ -43,4 +43,57 @@ describe("NativeSelect", () => {
     rerender(<NativeSelect {...PROPS} multiple />);
     expect(getIcon(container)).toBe(null);
   });
+
+  it("should handle the floating label state correctly for controlled values", () => {
+    function Test(): ReactElement {
+      const [value, setValue] = useState("");
+
+      return (
+        <>
+          <button type="button" onClick={() => setValue(options[2])}>
+            Set
+          </button>
+          <button type="button" onClick={() => setValue("")}>
+            Reset
+          </button>
+          <NativeSelect
+            id="field-id"
+            label="Label"
+            value={value}
+            onChange={(event) => setValue(event.currentTarget.value)}
+          >
+            {options.map((opt) => (
+              <option key={opt}>{opt}</option>
+            ))}
+          </NativeSelect>
+        </>
+      );
+    }
+
+    const { getByRole, getByText } = render(<Test />);
+
+    const setButton = getByRole("button", { name: "Set" });
+    const resetButton = getByRole("button", { name: "Reset" });
+    const field = getByRole("combobox") as HTMLSelectElement;
+    const label = getByText("Label");
+    expect(label.className).not.toContain("rmd-floating-label--active");
+    expect(label.className).not.toContain("rmd-floating-label--inactive");
+
+    fireEvent.click(setButton);
+    expect(label.className).toContain("rmd-floating-label--active");
+    expect(label.className).toContain("rmd-floating-label--inactive");
+
+    fireEvent.focus(field);
+    fireEvent.change(field, { target: { value: options[1] } });
+    expect(label.className).toContain("rmd-floating-label--active");
+    expect(label.className).not.toContain("rmd-floating-label--inactive");
+
+    fireEvent.blur(field);
+    expect(label.className).toContain("rmd-floating-label--active");
+    expect(label.className).toContain("rmd-floating-label--inactive");
+
+    fireEvent.click(resetButton);
+    expect(label.className).not.toContain("rmd-floating-label--active");
+    expect(label.className).not.toContain("rmd-floating-label--inactive");
+  });
 });

packages/form/src/text-field/TextArea.tsx

@@ -248,6 +248,8 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
         mask.value = event.currentTarget.value;
         updateHeight();
       },
+      value,
+      defaultValue,
     });
 
     const [ref, refHandler] = useEnsuredRef(forwardedRef);

packages/form/src/text-field/__tests__/TextArea.tsx

@@ -1,6 +1,6 @@
 // TODO: Figure out how to test the resize behavior in jsdom, or just write
 // tests with cypress
-import React from "react";
+import React, { ReactElement, useState } from "react";
 import { act, fireEvent, render } from "@testing-library/react";
 import { mocked } from "ts-jest/utils";
 import ResizeObserverPolyfill from "resize-observer-polyfill";
@@ -145,4 +145,53 @@ describe("TextArea", () => {
     rerender(<TextArea {...props} resize="horizontal" />);
     expect(realContainer).toHaveClass("rmd-text-field-container--inline");
   });
+
+  it("should handle the floating label state correctly for controlled values", () => {
+    function Test(): ReactElement {
+      const [value, setValue] = useState("");
+
+      return (
+        <>
+          <button type="button" onClick={() => setValue("100")}>
+            Set
+          </button>
+          <button type="button" onClick={() => setValue("")}>
+            Reset
+          </button>
+          <TextArea
+            id="field-id"
+            label="Label"
+            value={value}
+            onChange={(event) => setValue(event.currentTarget.value)}
+          />
+        </>
+      );
+    }
+
+    const { getByRole, getByText } = render(<Test />);
+
+    const setButton = getByRole("button", { name: "Set" });
+    const resetButton = getByRole("button", { name: "Reset" });
+    const field = getByRole("textbox") as HTMLInputElement;
+    const label = getByText("Label");
+    expect(label.className).not.toContain("rmd-floating-label--active");
+    expect(label.className).not.toContain("rmd-floating-label--inactive");
+
+    fireEvent.click(setButton);
+    expect(label.className).toContain("rmd-floating-label--active");
+    expect(label.className).toContain("rmd-floating-label--inactive");
+
+    fireEvent.focus(field);
+    fireEvent.change(field, { target: { value: "100-" } });
+    expect(label.className).toContain("rmd-floating-label--active");
+    expect(label.className).not.toContain("rmd-floating-label--inactive");
+
+    fireEvent.blur(field);
+    expect(label.className).toContain("rmd-floating-label--active");
+    expect(label.className).toContain("rmd-floating-label--inactive");
+
+    fireEvent.click(resetButton);
+    expect(label.className).not.toContain("rmd-floating-label--active");
+    expect(label.className).not.toContain("rmd-floating-label--inactive");
+  });
 });