AR-2127 fix FormErrorMessage not being removed when errors disappear

src/FormControl/FormControl.spec.tsx

@@ -40,10 +40,20 @@ test("when the label is clicked it focuses the input", () => {
   expect(input).toHaveFocus();
 });
 
-test("when passed `HelperText`, helper text is rendered", () => {
-  const { container } = render(
+test("when rendering `FormHelperText`, helper text is rendered", () => {
+  const { container, rerender } = render(
     <FormControl id="test">
-      <FormHelperText>helper text</FormHelperText>
+      <FormHelperText showIcon={false}>helper text</FormHelperText>
+      <Input />
+    </FormControl>,
+  );
+
+  expect(screen.queryByText("helper text")).toBeInTheDocument();
+  expect(container.querySelectorAll("svg")).toHaveLength(0);
+
+  rerender(
+    <FormControl id="test">
+      <FormHelperText showIcon>helper text</FormHelperText>
       <Input />
     </FormControl>,
   );
@@ -66,7 +76,7 @@ test("when passed two `HelperText` and `FormErrorMessage`, only renders the `For
   expect(container.querySelectorAll("svg")).toHaveLength(1);
 });
 
-test("when passed `<FormControl error />`, renders error and svg", () => {
+test("when passed `<FormErrorMessage />`, renders error and svg", () => {
   const { container } = render(
     <FormControl id="test">
       <Input />
@@ -78,6 +88,24 @@ test("when passed `<FormControl error />`, renders error and svg", () => {
   expect(container.querySelector("svg")).toBeInTheDocument();
 });
 
+test("when passed `<FormErrorMessage />` that is removed, removes the error message", () => {
+  const Component: React.FC<{ errorText?: string }> = ({ errorText }) => (
+    <FormControl id="test">
+      <Input />
+      {errorText && <FormErrorMessage>{errorText}</FormErrorMessage>}
+    </FormControl>
+  );
+
+  const { container, rerender } = render(<Component errorText="error text" />);
+
+  expect(screen.getByText("error text")).toBeInTheDocument();
+  expect(container.querySelector("svg")).toBeInTheDocument();
+
+  rerender(<Component />);
+
+  expect(screen.queryByText("error text")).not.toBeInTheDocument();
+});
+
 test("when passed `<HelperText>` witout `showIcon` prop, renders no svg", () => {
   const { container } = render(
     <FormControl id="test">
@@ -90,7 +118,7 @@ test("when passed `<HelperText>` witout `showIcon` prop, renders no svg", () =>
   expect(container.querySelector("svg")).not.toBeInTheDocument();
 });
 
-test.only("when passed `<HelperText>` with `showIcon` prop, renders svg", () => {
+test("when passed `<HelperText>` with `showIcon` prop, renders svg", () => {
   const { container } = render(
     <FormControl id="test">
       <FormHelperText showIcon>helper text</FormHelperText>

src/FormErrorMessage/index.tsx

@@ -52,8 +52,14 @@ export const FormErrorMessage: React.FC<Props> = ({ children, className }) => {
   }, [className, feedbackId, children]);
 
   React.useLayoutEffect(() => {
-    // This will cause a bug if you change the `error` prop
     setErrorMessageElement?.(element);
+
+    return () => {
+      // Clear the element to clean up after ourself. If we are merely changing,
+      // then another `set` will be called quickly enough where this won't
+      // flicker the content.
+      setErrorMessageElement?.(null);
+    };
   }, [setErrorMessageElement, element]);
 
   // If `setErrorMessageElement` exists then we're rendering this under the form control