From 3aa13afba29239768612fadfd3861a198e4b749b Mon Sep 17 00:00:00 2001
From: Omar De Los Santos <omar@xolos.tech>
Date: Wed, 21 Aug 2024 09:22:08 -0700
Subject: [PATCH] feat(RAC): Allow passing data attributes to FieldError
 (#6895)

* Allow passing data attributes to FieldError

* Update FieldError.tsx

just fixing some lint, not sure how it passed

---------

Co-authored-by: Robert Snow <snowystinger@gmail.com>
Co-authored-by: Reid Barber <reid@reidbarber.com>
---
 .../react-aria-components/src/FieldError.tsx  |  8 ++++---
 .../test/FieldError.test.js                   | 23 +++++++++++++++++++
 2 files changed, 28 insertions(+), 3 deletions(-)
 create mode 100644 packages/react-aria-components/test/FieldError.test.js

diff --git a/packages/react-aria-components/src/FieldError.tsx b/packages/react-aria-components/src/FieldError.tsx
index 1e64f6c7124..9be357ef033 100644
--- a/packages/react-aria-components/src/FieldError.tsx
+++ b/packages/react-aria-components/src/FieldError.tsx
@@ -10,15 +10,16 @@
  * governing permissions and limitations under the License.
  */
 
+import {DOMProps, ValidationResult} from "@react-types/shared";
+import {filterDOMProps} from "@react-aria/utils";
 import React, {createContext, ForwardedRef, forwardRef, useContext} from 'react';
 import {RenderProps, useRenderProps} from './utils';
 import {Text} from './Text';
-import {ValidationResult} from '@react-types/shared';
 
 export const FieldErrorContext = createContext<ValidationResult | null>(null);
 
 export interface FieldErrorRenderProps extends ValidationResult {}
-export interface FieldErrorProps extends RenderProps<FieldErrorRenderProps> {}
+export interface FieldErrorProps extends RenderProps<FieldErrorRenderProps>, DOMProps {}
 
 function FieldError(props: FieldErrorProps, ref: ForwardedRef<HTMLElement>) {
   let validation = useContext(FieldErrorContext);
@@ -37,6 +38,7 @@ export {_FieldError as FieldError};
 
 const FieldErrorInner = forwardRef((props: FieldErrorProps, ref: ForwardedRef<HTMLElement>) => {
   let validation = useContext(FieldErrorContext)!;
+  let domProps = filterDOMProps(props)!;
   let renderProps = useRenderProps({
     ...props,
     defaultClassName: 'react-aria-FieldError',
@@ -48,5 +50,5 @@ const FieldErrorInner = forwardRef((props: FieldErrorProps, ref: ForwardedRef<HT
     return null;
   }
 
-  return <Text slot="errorMessage" {...renderProps} ref={ref} />;
+  return <Text slot="errorMessage" {...domProps} {...renderProps} ref={ref} />;
 });
diff --git a/packages/react-aria-components/test/FieldError.test.js b/packages/react-aria-components/test/FieldError.test.js
new file mode 100644
index 00000000000..455348fdb92
--- /dev/null
+++ b/packages/react-aria-components/test/FieldError.test.js
@@ -0,0 +1,23 @@
+import {FieldError} from '../src/FieldError';
+import {Input} from '../src/Input';
+import {Label} from '../src/Label';
+import React from 'react';
+import {render} from '@react-spectrum/test-utils-internal';
+import {TextField} from '../src/TextField';
+
+describe('FieldError', function () {
+  it('supports data attributes passed as props', async () => {
+    const TEST_ID = 'testid';
+
+    const {getByTestId} = render(
+      <TextField isInvalid>
+        <Label>Email</Label>
+        <Input />
+        <FieldError data-testid={TEST_ID}>An error</FieldError>
+      </TextField>
+    );
+
+    const element = getByTestId(TEST_ID);
+    expect(element).toHaveTextContent('An error');
+  });
+});