From bd5abb1c80d2d18060aa0d3211adef1673f8398d Mon Sep 17 00:00:00 2001
From: Oliver Gupte <ogupte@users.noreply.github.com>
Date: Mon, 25 Jul 2022 11:16:28 -0400
Subject: [PATCH] [APM] Fix custom link filter select value (#137025)

* [APM] Fix custom link filters to clear values after selecting field (#126066)

* adds line comment

* adds e2e test to validate the fix
---
 .../power_user/settings/custom_links.spec.ts        | 13 +++++++++++++
 .../filters_section.tsx                             |  4 +++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/x-pack/plugins/apm/ftr_e2e/cypress/integration/power_user/settings/custom_links.spec.ts b/x-pack/plugins/apm/ftr_e2e/cypress/integration/power_user/settings/custom_links.spec.ts
index 6e72015ea9347..e5c409cb6da0d 100644
--- a/x-pack/plugins/apm/ftr_e2e/cypress/integration/power_user/settings/custom_links.spec.ts
+++ b/x-pack/plugins/apm/ftr_e2e/cypress/integration/power_user/settings/custom_links.spec.ts
@@ -34,4 +34,17 @@ describe('Custom links', () => {
     cy.get('[data-test-subj="editCustomLink"]').click();
     cy.contains('Delete').click();
   });
+
+  it('clears filter values when field is selected', () => {
+    cy.visit(basePath);
+    cy.contains('Create custom link').click();
+    cy.get('[data-test-subj="filter-0"]').select('service.name');
+    cy.get(
+      '[data-test-subj="service.name.value"] [data-test-subj="comboBoxSearchInput"]'
+    ).type('foo');
+    cy.get('[data-test-subj="filter-0"]').select('service.environment');
+    cy.get(
+      '[data-test-subj="service.environment.value"] [data-test-subj="comboBoxInput"]'
+    ).should('not.contain', 'foo');
+  });
 });
diff --git a/x-pack/plugins/apm/public/components/app/settings/custom_link/create_edit_custom_link_flyout/filters_section.tsx b/x-pack/plugins/apm/public/components/app/settings/custom_link/create_edit_custom_link_flyout/filters_section.tsx
index 60f6003ceeeb4..5b2ceb5f353dd 100644
--- a/x-pack/plugins/apm/public/components/app/settings/custom_link/create_edit_custom_link_flyout/filters_section.tsx
+++ b/x-pack/plugins/apm/public/components/app/settings/custom_link/create_edit_custom_link_flyout/filters_section.tsx
@@ -108,7 +108,8 @@ export function FiltersSection({
                   }
                 )}
                 onChange={(e) =>
-                  onChangeFilter(e.target.value as FilterKey, value, idx)
+                  // set value to empty string to reset value when new field is selected
+                  onChangeFilter(e.target.value as FilterKey, '', idx)
                 }
                 isInvalid={
                   !isEmpty(value) &&
@@ -118,6 +119,7 @@ export function FiltersSection({
             </EuiFlexItem>
             <EuiFlexItem>
               <SuggestionsSelect
+                key={key}
                 dataTestSubj={`${key}.value`}
                 fieldName={key}
                 placeholder={i18n.translate(