Merge pull request #289 from open-formulieren/issue/266-editgrid-with-addressnl

#226 bugfix of adressNL crashing inside the editgrid

Author: sergei-maertens

src/registry/addressNL/deriveAddress.ts

@@ -3,7 +3,7 @@ import {useFormikContext} from 'formik';
 import {useEffect, useState} from 'react';
 import {useAsync} from 'react-use';
 
-import {useDebounce, useFormSettings} from '@/hooks';
+import {useDebounce, useFieldConfig, useFormSettings} from '@/hooks';
 
 import type {FormValues} from './types';
 import {DEFAULT_POSTCODE_REGEX, HOUSE_NUMBER_REGEX} from './validationSchema';
@@ -20,6 +20,7 @@ const testValidInputs = (postcode: string, houseNumber: string): boolean => {
 
 export const useDeriveAddress = (key: string, enabled: boolean): UseDeriveAddress => {
   const {getFieldProps, setFieldValue} = useFormikContext<FormValues>();
+  key = useFieldConfig(key);
   const {value} = getFieldProps<AddressData>(key);
   const formSettings = useFormSettings();
   const [enableManualEntry, setEnableManualEntry] = useState<boolean>(false);

src/registry/editgrid/index.stories.ts

@@ -10,9 +10,10 @@ import {expect, fn, userEvent, waitFor, within} from 'storybook/test';
 
 import FormioComponent from '@/components/FormioComponent';
 import type {FormioFormProps} from '@/components/FormioForm';
+import type {FormSettings} from '@/context';
 import {getRegistryEntry} from '@/registry';
 import {renderComponentInForm} from '@/registry/storybook-helpers';
-import {withFormik} from '@/sb-decorators';
+import {withFormSettingsProvider, withFormik} from '@/sb-decorators';
 import type {JSONObject} from '@/types';
 
 import {FormioEditGrid} from './';
@@ -819,3 +820,60 @@ export const MutationsTriggerRevalidation: ValidationStory = {
     });
   },
 };
+
+export const WithAdressNL: Story = {
+  decorators: [withFormSettingsProvider, withFormik],
+  args: {
+    componentDefinition: {
+      id: 'component1',
+      type: 'editgrid',
+      key: 'editgrid',
+      label: 'Various combinations of value display',
+      disableAddingRemovingRows: false,
+      groupLabel: 'Nested item',
+      components: [
+        {
+          id: 'addressNL',
+          type: 'addressNL',
+          key: 'addressNL',
+          label: 'AddressNL',
+          layout: 'singleColumn',
+          deriveAddress: true,
+        },
+      ],
+    },
+  },
+  parameters: {
+    formik: {
+      initialValues: {
+        editgrid: [
+          {
+            addressNL: {
+              postcode: '1043GR',
+              houseNumber: '151',
+              houseLetter: 'A',
+              houseNumberAddition: '9',
+              streetName: 'Kingsfordweg',
+              city: 'Amsterdam',
+            } satisfies AddressData,
+          },
+        ],
+      },
+    },
+    formSettings: {
+      componentParameters: {
+        addressNL: {
+          addressAutoComplete: async () => ({
+            streetName: 'Autofilled street',
+            city: 'Autofilled',
+            secretStreetCity: 'some-hashed-security-thing',
+          }),
+        },
+      } satisfies FormSettings['componentParameters'],
+    },
+  },
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole('button', {name: 'Edit item 1'}));
+  },
+};