Control field validation behaviour

.storybook/decorators.tsx

@@ -3,6 +3,8 @@ import {fn} from '@storybook/test';
 import {Form, Formik} from 'formik';
 import {CSSProperties} from 'react';
 
+import RendererSettingsProvider from '../src/components/RendererSettingsProvider';
+
 /**
  * Wrap stories so that they are inside a container with the class name "utrecht-document", used
  * to wrap some 'page-global' styling.
@@ -50,3 +52,11 @@ export const withFormik: Decorator = (Story, context) => {
     </Formik>
   );
 };
+
+export const withRenderSettingsProvider: Decorator = (Story, {parameters}) => (
+  <RendererSettingsProvider
+    requiredFieldsWithAsterisk={parameters?.renderSettings?.requiredFieldsWithAsterisk ?? true}
+  >
+    <Story />
+  </RendererSettingsProvider>
+);

src/components/FormioForm.stories.tsx

@@ -264,13 +264,17 @@ export const InitialErrorsRevalidation: Story = {
       expect(await canvas.findByText('External error for field 2')).toBeVisible();
     });
 
+    // NOTE - this doesn't work properly if the browser window is not focused. Chrome
+    // and Firefox appear not to dispatch the focus/blur events if another window on your
+    // device has focus.
     await step('Edit field 2', async () => {
       const input = canvas.getByLabelText('Field 2');
       await userEvent.type(input, 'invalid input');
       input.blur();
-
       expect(await canvas.findByText('Invalid')).toBeVisible();
       expect(canvas.queryByText('External error for field 2')).not.toBeInTheDocument();
+      // may not be removed
+      expect(canvas.getByText('External error for field 1')).toBeVisible();
     });
   },
 };

src/components/forms/RadioField/RadioField.stories.ts

@@ -1,7 +1,7 @@
 import {Meta, StoryObj} from '@storybook/react';
 import {expect, userEvent, within} from '@storybook/test';
 
-import {withFormik} from '@/sb-decorators';
+import {withFormik, withRenderSettingsProvider} from '@/sb-decorators';
 
 import RadioField from './RadioField';
 
@@ -74,17 +74,17 @@ export const ValidationError: Story = {
   },
 };
 
-// export const NoAsterisks: Story = {
-//   name: 'No asterisk for required',
-//   decorators: [ConfigDecorator],
-//   parameters: {
-//     config: {
-//       requiredFieldsWithAsterisk: false,
-//     },
-//   },
-//   args: {
-//     name: 'test',
-//     label: 'Default required',
-//     isRequired: true,
-//   },
-// };
+export const NoAsterisks: Story = {
+  name: 'No asterisk for required',
+  decorators: [withRenderSettingsProvider],
+  parameters: {
+    renderSettings: {
+      requiredFieldsWithAsterisk: false,
+    },
+  },
+  args: {
+    name: 'test',
+    label: 'Default required',
+    isRequired: true,
+  },
+};

src/components/forms/TextField/TextField.mdx

@@ -29,4 +29,4 @@ Validation errors are tracked in the Formik state and displayed if any are prese
 The backend can be configured to treat fields as required by default and instead mark optional
 fields explicitly, through the `ConfigContext`.
 
-{/* <Story of={TextFieldStories.NoAsterisks} /> */}
+<Story of={TextFieldStories.NoAsterisks} />

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

@@ -1,7 +1,7 @@
 import {Meta, StoryObj} from '@storybook/react';
 import {expect, userEvent, within} from '@storybook/test';
 
-import {withFormik} from '@/sb-decorators';
+import {withFormik, withRenderSettingsProvider} from '@/sb-decorators';
 
 import TextField from './TextField';
 
@@ -68,17 +68,17 @@ export const ValidationError: Story = {
   },
 };
 
-// export const NoAsterisks = {
-//   name: 'No asterisk for required',
-//   decorators: [ConfigDecorator],
-//   parameters: {
-//     config: {
-//       requiredFieldsWithAsterisk: false,
-//     },
-//   },
-//   args: {
-//     name: 'test',
-//     label: 'Default required',
-//     isRequired: true,
-//   },
-// };
+export const NoAsterisks = {
+  name: 'No asterisk for required',
+  decorators: [withRenderSettingsProvider],
+  parameters: {
+    renderSettings: {
+      requiredFieldsWithAsterisk: false,
+    },
+  },
+  args: {
+    name: 'test',
+    label: 'Default required',
+    isRequired: true,
+  },
+};

src/components/forms/TextField/TextField.tsx

@@ -1,6 +1,6 @@
 import {FormField, Paragraph, Textbox} from '@utrecht/component-library-react';
 import type {TextboxProps} from '@utrecht/component-library-react/dist/Textbox';
-import {useField} from 'formik';
+import {useField, useFormikContext} from 'formik';
 import {useId} from 'react';
 
 import HelpText from '@/components/forms/HelpText';
@@ -56,6 +56,7 @@ const TextField: React.FC<TextFieldProps & TextboxProps> = ({
   placeholder,
   ...extraProps
 }) => {
+  const {validateField} = useFormikContext();
   const [props, {error = '', touched}] = useField({name, type: 'text'});
   const id = useId();
 
@@ -70,6 +71,13 @@ const TextField: React.FC<TextFieldProps & TextboxProps> = ({
       <Paragraph>
         <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}
           disabled={isDisabled}

tsconfig.json

@@ -23,6 +23,6 @@
     },
     "skipLibCheck": true
   },
-  "include": ["src"],
+  "include": ["src/**/*", ".storybook/**/*"],
   "exclude": ["node_modules", "dist"]
 }