From af130ea5e95cbd38ce5bb32714d3cdfaf3660401 Mon Sep 17 00:00:00 2001
From: Jesse Yang <jesse.yang@airbnb.com>
Date: Fri, 18 Dec 2020 00:45:27 -0800
Subject: [PATCH] fix: FilterBox select lose focus when focused (#12114)

---
 .../integration/dashboard/filter.test.ts      | 26 +++++++------------
 superset-frontend/cypress-base/package.json   |  5 +++-
 .../visualizations/FilterBox/FilterBox.jsx    |  3 +--
 3 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/filter.test.ts b/superset-frontend/cypress-base/cypress/integration/dashboard/filter.test.ts
index b40eb08d20..70ac7017be 100644
--- a/superset-frontend/cypress-base/cypress/integration/dashboard/filter.test.ts
+++ b/superset-frontend/cypress-base/cypress/integration/dashboard/filter.test.ts
@@ -65,27 +65,21 @@ describe('Dashboard filter', () => {
       cy.wait(aliases);
     });
   });
-  xit('should apply filter', () => {
-    cy.get('.Select__control input[type=text]')
-      .first()
-      .should('be.visible')
-      .focus();
+
+  it('should apply filter', () => {
+    cy.get('.Select__placeholder:first').click();
 
     // should open the filter indicator
-    cy.get('[data-test="filter"]')
-      .should('be.visible', { timeout: 10000 })
+    cy.get('svg[data-test="filter"]')
+      .should('be.visible')
       .should(nodes => {
-        expect(nodes).to.have.length(9); // this part was not working, xit-ed
+        expect(nodes).to.have.length(9);
       });
 
-    cy.get('[data-test="chart-container"]').find('svg').should('be.visible');
-
-    cy.get('.Select__control input[type=text]').first().focus().blur();
-
-    cy.get('.Select__control input[type=text]')
-      .first()
-      .focus()
-      .type('So', { force: true, delay: 100 });
+    cy.get('.Select__control:first input[type=text]').type('So', {
+      force: true,
+      delay: 100,
+    });
 
     cy.get('.Select__menu').first().contains('South Asia').click();
 
diff --git a/superset-frontend/cypress-base/package.json b/superset-frontend/cypress-base/package.json
index 7b8163d79d..24d185d90d 100644
--- a/superset-frontend/cypress-base/package.json
+++ b/superset-frontend/cypress-base/package.json
@@ -19,6 +19,9 @@
     "eslint-plugin-cypress": "^2.11.1"
   },
   "nyc": {
-    "reporter": ["html", "json"]
+    "reporter": [
+      "html",
+      "json"
+    ]
   }
 }
diff --git a/superset-frontend/src/visualizations/FilterBox/FilterBox.jsx b/superset-frontend/src/visualizations/FilterBox/FilterBox.jsx
index e835e4aa15..08e315598d 100644
--- a/superset-frontend/src/visualizations/FilterBox/FilterBox.jsx
+++ b/superset-frontend/src/visualizations/FilterBox/FilterBox.jsx
@@ -102,7 +102,7 @@ const Styles = styled.div`
   overflow: visible;
 `;
 
-class FilterBox extends React.Component {
+class FilterBox extends React.PureComponent {
   constructor(props) {
     super(props);
     this.state = {
@@ -424,7 +424,6 @@ class FilterBox extends React.Component {
 
   render() {
     const { instantFiltering } = this.props;
-
     return (
       <Styles>
         {this.renderDateFilter()}