Render nothing if isInvalid and no error message is provided (#6099)

* Update FieldError so it doesnt render anything if isInvalid is controlled but no error message is provided

* adding test and updating story

Author: LFDanLu

packages/react-aria-components/example/index.css

@@ -453,3 +453,12 @@ html {
     opacity: 0.4;
   }
 }
+
+.textfieldExample {
+  display: flex;
+  flex-direction: column;
+
+  .errorMessage {
+    padding-bottom: 10px;
+  }
+}

packages/react-aria-components/src/FieldError.tsx

@@ -40,9 +40,13 @@ const FieldErrorInner = forwardRef((props: FieldErrorProps, ref: ForwardedRef<HT
   let renderProps = useRenderProps({
     ...props,
     defaultClassName: 'react-aria-FieldError',
-    defaultChildren: validation.validationErrors.join(' '),
+    defaultChildren: validation.validationErrors.length === 0 ? undefined : validation.validationErrors.join(' '),
     values: validation
   });
 
+  if (renderProps.children == null) {
+    return null;
+  }
+
   return <Text slot="errorMessage" {...renderProps} ref={ref} />;
 });

packages/react-aria-components/stories/TextField.stories.tsx

@@ -10,8 +10,10 @@
  * governing permissions and limitations under the License.
  */
 
-import {Input, Label, TextField} from 'react-aria-components';
+import {Button, FieldError, Form, Input, Label, TextField} from 'react-aria-components';
+import {classNames} from '@react-spectrum/utils';
 import React from 'react';
+import styles from '../example/index.css';
 
 export default {
   title: 'React Aria Components'
@@ -25,3 +27,32 @@ export const TextfieldExample = () => {
     </TextField>
   );
 };
+
+export const TextFieldSubmitExample = (args) => {
+  return (
+    <Form>
+      <TextField className={classNames(styles, 'textfieldExample')} name="email" type="email" isRequired {...args}>
+        <Label>Email</Label>
+        <Input />
+        <FieldError className={classNames(styles, 'errorMessage')} />
+      </TextField>
+      <Button type="submit">Submit</Button>
+      <Button type="reset">Reset</Button>
+    </Form>
+  );
+};
+
+TextFieldSubmitExample.story = {
+  argTypes: {
+    isInvalid: {
+      control: {
+        type: 'boolean'
+      }
+    }
+  },
+  parameters: {
+    description: {
+      data: 'Non controlled isInvalid should render the default error message (aka just hit submit and see that it appears). Controlled isInvalid=true should not render the error message div (aka no padding should appear between the input and the buttons).'
+    }
+  }
+};

packages/react-aria-components/test/TextField.test.js

@@ -116,7 +116,7 @@ describe('TextField', () => {
       );
 
       let input = getByRole('textbox');
-      
+
       expect(input.closest('.react-aria-TextField')).not.toHaveAttribute('data-readonly');
       rerender(<TestTextField input={component} isReadOnly />);
       expect(input.closest('.react-aria-TextField')).toHaveAttribute('data-readonly');
@@ -128,7 +128,7 @@ describe('TextField', () => {
       );
 
       let input = getByRole('textbox');
-      
+
       expect(input.closest('.react-aria-TextField')).not.toHaveAttribute('data-required');
       rerender(<TestTextField input={component} isRequired />);
       expect(input.closest('.react-aria-TextField')).toHaveAttribute('data-required');
@@ -176,6 +176,24 @@ describe('TextField', () => {
       expect(input.closest('.react-aria-TextField')).not.toHaveAttribute('data-invalid');
     });
 
+    it('should not render the field error div if no error is provided and isInvalid is true', async () => {
+      let Component = component;
+      let {getByRole} = render(
+        <form data-testid="form">
+          <TextField isRequired isInvalid>
+            <Label>Test</Label>
+            <Component />
+            <FieldError />
+          </TextField>
+        </form>
+      );
+
+      let input = getByRole('textbox');
+      expect(input).toHaveAttribute('aria-invalid');
+      expect(input).toHaveAttribute('data-invalid');
+      expect(input).not.toHaveAttribute('aria-describedby');
+    });
+
     it('supports customizing validation errors', async () => {
       let Component = component;
       let {getByRole, getByTestId} = render(