Fix support for address autofill in editgrid

src/formio/components/TextField.js

@@ -91,7 +91,7 @@ class TextField extends Formio.Components.components.textfield {
 
   fieldLogic(data, row) {
     const changed = super.fieldLogic(data, row);
-    this.handleSettingLocationData(data);
+    this.handleSettingLocationData(row);
     return changed;
   }
 }

src/formio/components/TextField.mocks.js

@@ -0,0 +1,8 @@
+import {rest} from 'msw';
+
+import {BASE_URL} from 'api-mocks';
+
+export const mockAddressAutoCompleteGet = (street = 'Keizersgracht', city = 'Amsterdam') =>
+  rest.get(`${BASE_URL}location/get-street-name-and-city`, (req, res, ctx) => {
+    return res(ctx.json({streetName: street, city}));
+  });

src/formio/components/TextField.stories.js

@@ -1,10 +1,15 @@
-import {withUtrechtDocument} from 'story-utils/decorators';
+import {expect} from '@storybook/jest';
+import {userEvent, waitFor, within} from '@storybook/testing-library';
 
-import {SingleFormioComponent} from './story-util';
+import {ConfigDecorator, withUtrechtDocument} from 'story-utils/decorators';
+import {sleep} from 'utils';
+
+import {mockAddressAutoCompleteGet} from './TextField.mocks';
+import {MultipleFormioComponents, SingleFormioComponent} from './story-util';
 
 export default {
   title: 'Form.io components / Vanilla / TextField',
-  decorators: [withUtrechtDocument],
+  decorators: [withUtrechtDocument, ConfigDecorator],
   args: {
     type: 'textfield',
     extraComponentProperties: {},
@@ -22,6 +27,7 @@ export default {
   },
   parameters: {
     controls: {sort: 'requiredFirst'},
+    msw: {handlers: [mockAddressAutoCompleteGet('Keizersgracht', 'Amsterdam')]},
   },
 };
 
@@ -32,3 +38,127 @@ export const TextField = {
     label: 'Onderwerp',
   },
 };
+
+export const TextFieldsWithLocation = {
+  render: MultipleFormioComponents,
+  args: {
+    components: [
+      {
+        type: 'textfield',
+        key: 'postcode',
+        label: 'Postcode',
+        inputMask: '9999 AA',
+      },
+      {
+        type: 'textfield',
+        key: 'houseNumber',
+        label: 'Number',
+      },
+      {
+        type: 'textfield',
+        key: 'streetname',
+        label: 'Street',
+        deriveStreetName: true,
+        derivePostcode: 'postcode',
+        deriveHouseNumber: 'houseNumber',
+      },
+      {
+        type: 'textfield',
+        key: 'streetname',
+        label: 'City',
+        deriveCity: true,
+        derivePostcode: 'postcode',
+        deriveHouseNumber: 'houseNumber',
+      },
+    ],
+    evalContext: {},
+  },
+
+  play: async ({canvasElement, step}) => {
+    const canvas = within(canvasElement);
+    // formio... :thisisfine:
+    await sleep(100);
+
+    await step('Fill out postcode and number', async () => {
+      await userEvent.type(canvas.getByLabelText('Postcode'), '1015 CJ');
+      await userEvent.type(canvas.getByLabelText('Number'), '117');
+    });
+
+    await step('Check that street and city are autofilled', async () => {
+      await waitFor(async () => {
+        expect(canvas.getByLabelText('Street')).toHaveDisplayValue('Keizersgracht');
+      });
+      expect(canvas.getByLabelText('City')).toHaveDisplayValue('Amsterdam');
+    });
+  },
+};
+
+export const TextFieldsWithLocationInEditGrid = {
+  render: SingleFormioComponent,
+  args: {
+    type: 'editgrid',
+    key: 'addresses',
+    label: 'Addresses',
+    groupLabel: '',
+    maxLength: null,
+    extraComponentProperties: {
+      hideLabel: false,
+      components: [
+        {
+          type: 'textfield',
+          key: 'postcode',
+          label: 'Postcode',
+          inputMask: '9999 AA',
+        },
+        {
+          type: 'textfield',
+          key: 'houseNumber',
+          label: 'Number',
+        },
+        {
+          type: 'textfield',
+          key: 'streetname',
+          label: 'Street',
+          deriveStreetName: true,
+          derivePostcode: 'postcode',
+          deriveHouseNumber: 'houseNumber',
+        },
+        {
+          type: 'textfield',
+          key: 'streetname',
+          label: 'City',
+          deriveCity: true,
+          derivePostcode: 'postcode',
+          deriveHouseNumber: 'houseNumber',
+        },
+      ],
+      inlineEdit: false,
+      description: '',
+      disableAddingRemovingRows: false,
+      addAnother: 'Add another',
+      saveRow: 'Confirm',
+      removeRow: 'Delete',
+    },
+    evalContext: {},
+  },
+
+  play: async ({canvasElement, step}) => {
+    const canvas = within(canvasElement);
+    // formio... :thisisfine:
+    await sleep(100);
+
+    await userEvent.click(canvas.getByRole('button', {name: 'Add another'}));
+
+    await step('Fill out postcode and number', async () => {
+      await userEvent.type(canvas.getByLabelText('Postcode'), '1015 CJ');
+      await userEvent.type(canvas.getByLabelText('Number'), '117');
+    });
+
+    await step('Check that street and city are autofilled', async () => {
+      await waitFor(async () => {
+        expect(canvas.getByLabelText('Street')).toHaveDisplayValue('Keizersgracht');
+      });
+      expect(canvas.getByLabelText('City')).toHaveDisplayValue('Amsterdam');
+    });
+  },
+};