Control field validation behaviour

.storybook/decorators.tsx

@@ -2,6 +2,7 @@ import type {Decorator} from '@storybook/react';
 import {fn} from '@storybook/test';
 import {Form, Formik} from 'formik';
 import {CSSProperties} from 'react';
+import {toFormikValidationSchema} from 'zod-formik-adapter';
 
 import RendererSettingsProvider from '../src/components/RendererSettingsProvider';
 
@@ -34,13 +35,17 @@ export const withFormik: Decorator = (Story, context) => {
   const initialTouched = context.parameters?.formik?.initialTouched || {};
   const wrapForm = context.parameters?.formik?.wrapForm ?? true;
   const onSubmit = context.parameters?.formik?.onSubmit || fn();
+  const zodSchema = context.parameters?.formik?.zodSchema;
   return (
     <Formik
       initialValues={initialValues}
       initialErrors={initialErrors}
       initialTouched={initialTouched}
       enableReinitialize
       onSubmit={async values => onSubmit(values)}
+      validateOnBlur={false}
+      validateOnChange={false}
+      validationSchema={zodSchema ? toFormikValidationSchema(zodSchema) : undefined}
     >
       {wrapForm ? (
         <Form id="storybook-withFormik-decorator-form" data-testid="storybook-formik-form">

src/components/forms/TextField/TextField.stories.ts

@@ -1,5 +1,6 @@
 import {Meta, StoryObj} from '@storybook/react';
 import {expect, userEvent, within} from '@storybook/test';
+import {z} from 'zod';
 
 import {withFormik, withRenderSettingsProvider} from '@/sb-decorators';
 
@@ -68,7 +69,7 @@ export const ValidationError: Story = {
   },
 };
 
-export const NoAsterisks = {
+export const NoAsterisks: Story = {
   name: 'No asterisk for required',
   decorators: [withRenderSettingsProvider],
   parameters: {
@@ -82,3 +83,33 @@ export const NoAsterisks = {
     isRequired: true,
   },
 };
+
+export const ValidateOnBlur: Story = {
+  args: {
+    name: 'validateOnBlur',
+    label: 'Validate on blur',
+  },
+  parameters: {
+    formik: {
+      initialValues: {
+        validateOnBlur: '',
+      },
+      zodSchema: z.object({
+        validateOnBlur: z.any().refine(() => false, {message: 'Always invalid'}),
+      }),
+    },
+  },
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+    const input = await canvas.findByLabelText('Validate on blur');
+    expect(input).not.toHaveAttribute('aria-invalid');
+
+    await userEvent.type(input, 'foo');
+    expect(input).toHaveFocus();
+    expect(input).not.toHaveAttribute('aria-invalid');
+
+    input.blur();
+    expect(await canvas.findByText('Always invalid')).toBeVisible();
+    expect(input).toHaveAttribute('aria-invalid', 'true');
+  },
+};

src/components/forms/TextField/TextField.tsx

@@ -72,11 +72,8 @@ const TextField: React.FC<TextFieldProps & TextboxProps> = ({
         <Textbox
           {...props}
           onBlur={async e => {
-            console.log('onBlur');
             props.onBlur(e);
-            console.log('validating');
             await validateField(name);
-            console.log('validation done');
           }}
           className="utrecht-textbox--openforms"
           id={id}