AR-2129 Allow all form control children to be removed on subsequent renders

src/FormControl/FormControl.spec.tsx

@@ -8,6 +8,9 @@ import { FormLabel } from "../FormLabel";
 import { FormHelperText } from "../FormHelperText";
 import { Input } from "../Input";
 import { FormErrorMessage } from "../FormErrorMessage";
+import { FormEndAdornment } from "../FormEndAdornment";
+import { FormStartAdornment } from "../FormStartAdornment";
+import { FormDescription } from "../FormDescription";
 
 test("when passed a label, renders it", () => {
  render(
@@ -88,24 +91,6 @@ test("when passed `<FormErrorMessage />`, 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">
@@ -143,3 +128,29 @@ test("when not passed `autoFocus` prop, should not have focus after mounting", (
 
  expect(formField).not.toHaveFocus();
 });
+
+test.each([
+ ["FormDescription", FormDescription],
+ ["FormEndAdornment", FormEndAdornment],
+ ["FormErrorMessage", FormErrorMessage],
+ ["FormHelperText", FormHelperText],
+ ["FormLabel", FormLabel],
+ ["FormStartAdornment", FormStartAdornment],
+])("%s can be removed on subsequent renders", (_, Component) => {
+ const { rerender } = render(
+ <FormControl id="test">
+ <Component>text</Component>
+ <Input />
+ </FormControl>,
+ );
+
+ expect(screen.getByText("text")).toBeInTheDocument();
+
+ rerender(
+ <FormControl id="test">
+ <Input />
+ </FormControl>,
+ );
+
+ expect(screen.queryByText("text")).not.toBeInTheDocument();
+});

src/FormDescription/index.tsx

@@ -52,6 +52,8 @@ export const FormDescription: React.FC<Props> = ({
 
  React.useLayoutEffect(() => {
  setDescription?.(element);
+
+ return () => setDescription?.(null);
  }, [element, setDescription]);
 
  return setDescription ? null : element;

src/FormEndAdornment/index.tsx

@@ -10,13 +10,10 @@ import { useFormControlInternalContext } from "../shared/FormControlContext";
  * This is intended to be rendered below `<FormControl>`. If this is rendered on
  * it's own; it will render `children` without any modification.
  */
-export function FormEndAdornment({
+export const FormEndAdornment: React.FC<{ className?: string }> = ({
  children,
  className,
-}: {
- children: React.ReactNode;
- className?: string;
-}): React.ReactNode {
+}) => {
  const { setEndAdornment } = useFormControlInternalContext();
 
  const element = React.useMemo(
@@ -40,7 +37,9 @@ export function FormEndAdornment({
 
  React.useLayoutEffect(() => {
  setEndAdornment?.(element);
+
+ return () => setEndAdornment?.(null);
  }, [element, setEndAdornment]);
 
  return setEndAdornment ? null : element;
-}
+};

src/FormHelperText/index.tsx

@@ -59,6 +59,8 @@ export const FormHelperText: React.FC<Props> = ({
  React.useLayoutEffect(() => {
  // This will cause a bug if you change the `error` prop
  setHelper?.(element);
+
+ return () => setHelper?.(null);
  }, [element, setHelper]);
 
  // If `setHelper` exists then we're rendering this under the form control

src/FormLabel/index.tsx

@@ -73,6 +73,8 @@ export const FormLabel: React.FC<Props> = ({
 
  React.useLayoutEffect(() => {
  setLabel?.(element);
+
+ return () => setLabel?.(null);
  }, [element, setLabel]);
 
  return setLabel ? null : element;

src/FormStartAdornment/index.tsx

@@ -10,13 +10,10 @@ import { useFormControlInternalContext } from "../shared/FormControlContext";
  * This is intended to be rendered below `<FormControl>`. If this is rendered on
  * it's own; it will render `children` without any modification.
  */
-export function FormStartAdornment({
+export const FormStartAdornment: React.FC<{ className?: string }> = ({
  children,
  className,
-}: {
- children: React.ReactNode;
- className?: string;
-}): React.ReactNode {
+}) => {
  const { setStartAdornment } = useFormControlInternalContext();
 
  const element = React.useMemo(
@@ -39,7 +36,9 @@ export function FormStartAdornment({
 
  React.useLayoutEffect(() => {
  setStartAdornment?.(element);
+
+ return () => setStartAdornment?.(null);
  }, [element, setStartAdornment]);
 
  return setStartAdornment ? null : element;
-}
+};