Fix Add filter button doesnt close popup after openning (#111917)

Co-authored-by: Su Tran <sutranbmt@gmail.com>

src/plugins/data/public/ui/filter_bar/filter_bar.tsx

@@ -55,6 +55,8 @@ function FilterBarUI(props: Props) {
     }
   }
 
+  const onAddFilterClick = () => setIsAddFilterPopoverOpen(!isAddFilterPopoverOpen);
+
   function renderItems() {
     return props.filters.map((filter, i) => (
       <EuiFlexItem key={i} grow={false} className="globalFilterBar__flexItem">
@@ -81,7 +83,7 @@ function FilterBarUI(props: Props) {
     const button = (
       <EuiButtonEmpty
         size="s"
-        onClick={() => setIsAddFilterPopoverOpen(true)}
+        onClick={onAddFilterClick}
         data-test-subj="addFilter"
         className="globalFilterBar__addButton"
       >

test/accessibility/apps/filter_panel.ts

@@ -24,6 +24,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     it('a11y test on add filter panel', async () => {
       await PageObjects.discover.openAddFilterPanel();
       await a11y.testAppSnapshot();
+      await PageObjects.discover.closeAddFilterPanel();
       await filterBar.addFilter('OriginCityName', 'is', 'Rome');
     });
 

test/functional/page_objects/discover_page.ts

@@ -83,6 +83,10 @@ export class DiscoverPageObject extends FtrService {
     await this.testSubjects.click('addFilter');
   }
 
+  public async closeAddFilterPanel() {
+    await this.testSubjects.click('addFilter');
+  }
+
   public async waitUntilSearchingHasFinished() {
     await this.testSubjects.missingOrFail('loadingSpinner', {
       timeout: this.defaultFindTimeout * 10,

test/functional/services/filter_bar.ts

@@ -199,5 +199,6 @@ export class FilterBarService extends FtrService {
   public async selectIndexPattern(indexPatternTitle: string): Promise<void> {
     await this.testSubjects.click('addFilter');
     await this.comboBox.set('filterIndexPatternsSelect', indexPatternTitle);
+    await this.testSubjects.click('addFilter');
   }
 }