fix: FilterBox select lose focus when focused (#12114)

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();
 

superset-frontend/cypress-base/package.json

@@ -19,6 +19,9 @@
     "eslint-plugin-cypress": "^2.11.1"
   },
   "nyc": {
-    "reporter": ["html", "json"]
+    "reporter": [
+      "html",
+      "json"
+    ]
   }
 }

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()}