diff --git a/x-pack/plugins/transform/public/app/sections/create_transform/components/aggregation_list/__snapshots__/popover_form.test.tsx.snap b/x-pack/plugins/transform/public/app/sections/create_transform/components/aggregation_list/__snapshots__/popover_form.test.tsx.snap
index 5f74967ff423c..966b3487ebfb2 100644
--- a/x-pack/plugins/transform/public/app/sections/create_transform/components/aggregation_list/__snapshots__/popover_form.test.tsx.snap
+++ b/x-pack/plugins/transform/public/app/sections/create_transform/components/aggregation_list/__snapshots__/popover_form.test.tsx.snap
@@ -2,12 +2,12 @@
 
 exports[`Transform: Aggregation <PopoverForm /> Minimal initialization 1`] = `
 <EuiForm
-  data-test-subj="transformAggPopoverForm_the-group-by-agg-name"
-  style={
+  css={
     Object {
       "width": "300px",
     }
   }
+  data-test-subj="transformAggPopoverForm_the-group-by-agg-name"
 >
   <EuiFormRow
     describedByIds={Array []}
diff --git a/x-pack/plugins/transform/public/app/sections/create_transform/components/aggregation_list/popover_form.test.tsx b/x-pack/plugins/transform/public/app/sections/create_transform/components/aggregation_list/popover_form.test.tsx
index 69c8b744425f1..0587d4f0e1c46 100644
--- a/x-pack/plugins/transform/public/app/sections/create_transform/components/aggregation_list/popover_form.test.tsx
+++ b/x-pack/plugins/transform/public/app/sections/create_transform/components/aggregation_list/popover_form.test.tsx
@@ -6,16 +6,19 @@
  */
 
 import { shallow } from 'enzyme';
+import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
-
 import { AggName } from '../../../../../../common/types/aggregations';
 import { PIVOT_SUPPORTED_AGGS } from '../../../../../../common/types/pivot_aggs';
-
 import { PivotAggsConfig } from '../../../../common';
-
 import { PopoverForm } from './popover_form';
+import { I18nProvider } from '@kbn/i18n-react';
 
 describe('Transform: Aggregation <PopoverForm />', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
   test('Minimal initialization', () => {
     const defaultData: PivotAggsConfig = {
       agg: PIVOT_SUPPORTED_AGGS.CARDINALITY,
@@ -37,4 +40,67 @@ describe('Transform: Aggregation <PopoverForm />', () => {
 
     expect(wrapper).toMatchSnapshot();
   });
+
+  test('preserves the field for unsupported aggs', async () => {
+    const mockOnChange = jest.fn();
+    const { getByTestId } = render(
+      <I18nProvider>
+        <PopoverForm
+          defaultData={{
+            field: 'AvgTicketPrice',
+            keyed: true,
+            ranges: [
+              {
+                to: 500,
+              },
+              {
+                from: 500,
+                to: 700,
+              },
+              {
+                from: 700,
+              },
+            ],
+            // @ts-ignore
+            agg: 'range',
+            aggName: 'AvgTicketPrice.ranges',
+            dropDownName: 'AvgTicketPrice.ranges',
+          }}
+          otherAggNames={[]}
+          options={{}}
+          onChange={mockOnChange}
+        />
+      </I18nProvider>
+    );
+
+    const aggNameInput = getByTestId('transformAggName');
+    fireEvent.change(aggNameInput, {
+      target: { value: 'betterName' },
+    });
+
+    const applyButton = getByTestId('transformApplyAggChanges');
+    fireEvent.click(applyButton);
+
+    expect(mockOnChange).toHaveBeenCalledTimes(1);
+    expect(mockOnChange).toHaveBeenCalledWith({
+      field: 'AvgTicketPrice',
+      keyed: true,
+      ranges: [
+        {
+          to: 500,
+        },
+        {
+          from: 500,
+          to: 700,
+        },
+        {
+          from: 700,
+        },
+      ],
+      // @ts-ignore
+      agg: 'range',
+      aggName: 'betterName',
+      dropDownName: 'AvgTicketPrice.ranges',
+    });
+  });
 });
diff --git a/x-pack/plugins/transform/public/app/sections/create_transform/components/aggregation_list/popover_form.tsx b/x-pack/plugins/transform/public/app/sections/create_transform/components/aggregation_list/popover_form.tsx
index 56eeea8a242c0..0585d4553a99c 100644
--- a/x-pack/plugins/transform/public/app/sections/create_transform/components/aggregation_list/popover_form.tsx
+++ b/x-pack/plugins/transform/public/app/sections/create_transform/components/aggregation_list/popover_form.tsx
@@ -100,8 +100,8 @@ export const PopoverForm: React.FC<Props> = ({ defaultData, otherAggNames, onCha
       ...aggConfigDef,
       agg,
       aggName,
-      field: resultField,
       dropDownName: defaultData.dropDownName,
+      ...(isUnsupportedAgg ? {} : { field: resultField }),
     };
 
     return updatedItem;
@@ -153,7 +153,7 @@ export const PopoverForm: React.FC<Props> = ({ defaultData, otherAggNames, onCha
   }
 
   return (
-    <EuiForm style={{ width: '300px' }} data-test-subj={'transformAggPopoverForm_' + aggName}>
+    <EuiForm css={{ width: '300px' }} data-test-subj={'transformAggPopoverForm_' + aggName}>
       <EuiFormRow
         error={!validAggName && [aggNameError]}
         isInvalid={!validAggName}
@@ -257,7 +257,7 @@ export const PopoverForm: React.FC<Props> = ({ defaultData, otherAggNames, onCha
           fontSize="s"
           language="json"
           paddingSize="s"
-          style={{ width: '100%', height: '200px' }}
+          css={{ width: '100%', height: '200px' }}
         >
           {JSON.stringify(getEsAggFromAggConfig(defaultData), null, 2)}
         </EuiCodeBlock>