fix: Avoid filter tab disappears on apply filter (#1229)

* fix: Avoid filter tab disapears on apply filter

* feat: Close filter tab on external click

Author: alencarlucas

src/components/BrowserFilter/BrowserFilter.react.js

@@ -27,29 +27,30 @@ export default class BrowserFilter extends React.Component {
       open: false,
       filters: new List(),
     };
+    this.toggle = this.toggle.bind(this)
   }
 
   componentDidMount() {
     this.node = ReactDOM.findDOMNode(this);
   }
 
   componentWillReceiveProps(props) {
-    if (props.schema !== this.props.schema) {
+    if (props.className !== this.props.className) {
       this.setState({ open: false });
     }
   }
 
-  open() {
+  toggle() {
     let filters = this.props.filters;
     if (this.props.filters.size === 0) {
       let available = Filters.availableFilters(this.props.schema, null, BLACKLISTED_FILTERS);
       let field = Object.keys(available)[0];
       filters = new List([new Map({ field: field, constraint: available[field][0] })]);
     }
-    this.setState({
-      open: true,
+    this.setState(prevState => ({
+      open: !prevState.open,
       filters: filters,
-    });
+    }));
     this.props.setCurrent(null);
   }
 
@@ -62,9 +63,7 @@ export default class BrowserFilter extends React.Component {
   }
 
   clear() {
-    this.setState({ open: false }, () => {
-      this.props.onChange(new Map());
-    });
+    this.props.onChange(new Map());
   }
 
   apply() {
@@ -76,27 +75,26 @@ export default class BrowserFilter extends React.Component {
       }*/
       return filter;
     })
-    this.setState({ open: false }, () => {
-      this.props.onChange(formatted);
-    });
+    this.props.onChange(formatted);
   }
 
   render() {
     let popover = null;
+    let buttonStyle = [styles.entry];
+
     if (this.state.open) {
       let position = Position.inDocument(this.node);
       let popoverStyle = [styles.popover];
+      buttonStyle.push(styles.title);
+
       if (this.props.filters.size) {
         popoverStyle.push(styles.active);
       }
       let available = Filters.availableFilters(this.props.schema, this.state.filters);
       popover = (
-        <Popover fixed={true} position={position}>
+        <Popover fixed={true} position={position} onExternalClick={this.toggle}>
           <div className={popoverStyle.join(' ')} onClick={() => this.props.setCurrent(null)}>
-            <div className={styles.title} onClick={() => this.setState({ open: false })}>
-              <Icon name='filter-solid' width={14} height={14} />
-              <span>{this.props.filters.size ? 'Filtered' : 'Filter'}</span>
-            </div>
+            <div onClick={this.toggle} style={{ cursor: 'pointer', width: this.node.clientWidth, height: this.node.clientHeight }}></div>
             <div className={styles.body}>
               <Filter
                 blacklist={BLACKLISTED_FILTERS}
@@ -129,13 +127,12 @@ export default class BrowserFilter extends React.Component {
         </Popover>
       );
     }
-    let buttonStyle = [styles.entry];
     if (this.props.filters.size) {
       buttonStyle.push(styles.active);
     }
     return (
       <div className={styles.wrap}>
-        <div className={buttonStyle.join(' ')} onClick={this.open.bind(this)}>
+        <div className={buttonStyle.join(' ')} onClick={this.toggle}>
           <Icon name='filter-solid' width={14} height={14} />
           <span>{this.props.filters.size ? 'Filtered' : 'Filter'}</span>
         </div>

src/components/Popover/Popover.react.js

@@ -5,7 +5,7 @@
  * This source code is licensed under the license found in the LICENSE file in
  * the root directory of this source tree.
  */
-import PropTypes   from 'lib/PropTypes'; 
+import PropTypes   from 'lib/PropTypes';
 import hasAncestor from 'lib/hasAncestor';
 import React       from 'react';
 import ReactDOM    from 'react-dom';
@@ -83,7 +83,7 @@ export default class Popover extends React.Component {
   }
 
   _checkExternalClick(e) {
-    if (!hasAncestor(e.target, this._popoverLayer) &&
+    if (!hasAncestor(e.target, this._popoverWrapper) &&
       this.props.onExternalClick) {
       this.props.onExternalClick(e);
     }

src/dashboard/Data/Browser/BrowserToolbar.react.js

@@ -169,7 +169,8 @@ let BrowserToolbar = ({
         setCurrent={setCurrent}
         schema={schema}
         filters={filters}
-        onChange={onFilterChange} />
+        onChange={onFilterChange}
+        className={className} />
       <div className={styles.toolbarSeparator} />
       {enableSecurityDialog ? <SecurityDialog
         setCurrent={setCurrent}