fix: close selector via click outside (#371)

Author: renjie-run

src/ClickOutside/index.js

@@ -62,25 +62,27 @@ class ClickOutside extends React.Component {
     document.removeEventListener('mousedown', this.handleDocumentClick);
   }
 
+  setClickedInsideStatus = (status) => {
+    this.isClickedInside = status || false;
+  }
+
   handleDocumentClick = (e) => {
     if (this.isClickedInside) {
-      this.isClickedInside = false;
+      this.setClickedInsideStatus(false);
       return;
     }
 
     this.props.onClickOutside(e);
   };
 
   handleMouseDown = () => {
-    this.isClickedInside = true;
+    this.setClickedInsideStatus(true);
   };
 
   render() {
-    return React.cloneElement(
-      React.Children.only(this.props.children), {
-        onMouseDownCapture: this.handleMouseDown
-      }
-    );
+    return React.cloneElement(React.Children.only(this.props.children), {
+      onMouseDownCapture: this.handleMouseDown
+    });
   }
 }
 

src/SelectOptionGroup/index.js

@@ -97,6 +97,10 @@ class SelectOptionGroup extends Component {
     if (isInModal) {
       e.stopPropagation();
       e.nativeEvent.stopImmediatePropagation();
+
+      // ClickOutside set isClickedInside to true via mouse down capture first
+      // Set isClickedInside to false after mouse down
+      this.clickOutsideRef && this.clickOutsideRef.setClickedInsideStatus(false);
     }
   };
 
@@ -177,7 +181,7 @@ class SelectOptionGroup extends Component {
       };
     }
     return (
-      <ClickOutside onClickOutside={this.props.onClickOutside}>
+      <ClickOutside ref={ref => this.clickOutsideRef = ref} onClickOutside={this.props.onClickOutside}>
         <div
           className={classnames('option-group', className ? 'option-group-' + className : '', {
             'pt-0': isShowSelected,