Fix test

Author: mj12albert

packages/react/src/field/control/useFieldControlValidation.ts

@@ -150,7 +150,10 @@ export function useFieldControlValidation() {
 
     const nextState = getState(element);
 
+    let defaultValidationMessage;
+
     if (element.validationMessage) {
+      defaultValidationMessage = element.validationMessage;
       validationErrors = [element.validationMessage];
     } else {
       const resultOrPromise = validate(value);
@@ -166,6 +169,7 @@ export function useFieldControlValidation() {
 
       if (result !== null) {
         nextState.valid = false;
+        nextState.customError = true;
 
         if (Array.isArray(result)) {
           validationErrors = result;
@@ -180,7 +184,7 @@ export function useFieldControlValidation() {
     const nextValidityData = {
       value,
       state: nextState,
-      error: element.validationMessage ?? (Array.isArray(result) ? result[0] : result),
+      error: defaultValidationMessage ?? (Array.isArray(result) ? result[0] : (result ?? '')),
       errors: validationErrors,
       initialValue: validityData.initialValue,
     };

packages/react/src/field/error/FieldError.test.tsx

@@ -14,8 +14,8 @@ describe('<Field.Error />', () => {
     },
   }));
 
-  it('should set aria-describedby on the control automatically', () => {
-    render(
+  it('should set aria-describedby on the control automatically', async () => {
+    await render(
       <Field.Root invalid>
         <Field.Control />
         <Field.Error forceShow>Message</Field.Error>
@@ -28,8 +28,8 @@ describe('<Field.Error />', () => {
     );
   });
 
-  it('should show error messages by default', () => {
-    render(
+  it('should show error messages by default', async () => {
+    await render(
       <Field.Root>
         <Field.Control required />
         <Field.Error>Message</Field.Error>
@@ -49,8 +49,8 @@ describe('<Field.Error />', () => {
   });
 
   describe('prop: match', () => {
-    it('should only render when `match` matches constraint validation', () => {
-      render(
+    it('should only render when `match` matches constraint validation', async () => {
+      await render(
         <Field.Root>
           <Field.Control required />
           <Field.Error match="valueMissing">Message</Field.Error>
@@ -69,8 +69,8 @@ describe('<Field.Error />', () => {
       expect(screen.queryByText('Message')).not.to.equal(null);
     });
 
-    it('should show custom errors', () => {
-      render(
+    it('should show custom errors', async () => {
+      await render(
         <Field.Root validate={() => 'error'}>
           <Field.Control />
           <Field.Error match="customError">Message</Field.Error>
@@ -89,8 +89,8 @@ describe('<Field.Error />', () => {
   });
 
   describe('prop: forceShow', () => {
-    it('should always render the error message', () => {
-      render(
+    it('should always render the error message', async () => {
+      await render(
         <Field.Root>
           <Field.Control required />
           <Field.Error forceShow>Message</Field.Error>