fix: Click outside should always trigger close (#438)

Author: zombieJ

examples/single.tsx

@@ -48,7 +48,14 @@ class Test extends React.Component {
 
     return (
       <div style={{ margin: 20 }}>
-        <div style={{ height: 150 }} />
+        <div
+          style={{ height: 150, background: 'rgba(0, 255, 0, 0.1)' }}
+          onMouseDown={e => {
+            e.preventDefault();
+          }}
+        >
+          Prevent Default
+        </div>
 
         <h2>Single Select</h2>
 

src/generate.tsx

@@ -41,6 +41,7 @@ import useLock from './hooks/useLock';
 import useDelayReset from './hooks/useDelayReset';
 import useLayoutEffect from './hooks/useLayoutEffect';
 import { getSeparatedContent } from './utils/valueUtil';
+import useSelectTriggerControl from './hooks/useSelectTriggerControl';
 
 const DEFAULT_OMIT_PROPS = [
   'removeIcon',
@@ -332,6 +333,8 @@ export default function generateSelector<
       delete domProps[prop];
     });
 
+    const containerRef = React.useRef<HTMLDivElement>(null);
+    const triggerRef = React.useRef<RefTriggerProps>(null);
     const selectorRef = React.useRef<RefSelectorProps>(null);
     const listRef = React.useRef<RefOptionListProps>(null);
 
@@ -634,6 +637,15 @@ export default function generateSelector<
       }
     };
 
+    useSelectTriggerControl(
+      [
+        containerRef.current,
+        triggerRef.current && triggerRef.current.getPopupElement(),
+      ],
+      triggerOpen,
+      onToggleOpen,
+    );
+
     // ============================= Search =============================
     const triggerSearch = (searchText: string, fromTyping: boolean = true) => {
       let ret = true;
@@ -764,7 +776,6 @@ export default function generateSelector<
     };
 
     // ========================== Focus / Blur ==========================
-    const triggerRef = React.useRef<RefTriggerProps>(null);
     /** Record real focus status */
     const focusRef = React.useRef<boolean>(false);
 
@@ -856,7 +867,6 @@ export default function generateSelector<
     };
 
     // ============================= Popup ==============================
-    const containerRef = React.useRef<HTMLDivElement>(null);
     const [containerWidth, setContainerWidth] = React.useState(null);
 
     useLayoutEffect(() => {

src/hooks/useSelectTriggerControl.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+
+export default function useSelectTriggerControl(
+  elements: (HTMLElement | undefined)[],
+  open: boolean,
+  triggerOpen: (open: boolean) => void,
+) {
+  const propsRef = React.useRef(null);
+  propsRef.current = {
+    elements: elements.filter(e => e),
+    open,
+    triggerOpen,
+  };
+
+  React.useEffect(() => {
+    function onGlobalMouseDown(event: MouseEvent) {
+      const target = event.target as HTMLElement;
+      if (
+        propsRef.current.open &&
+        propsRef.current.elements.every(
+          element => !element.contains(target) && element !== target,
+        )
+      ) {
+        // Should trigger close
+        propsRef.current.triggerOpen(false);
+      }
+    }
+
+    window.addEventListener('mousedown', onGlobalMouseDown);
+    return () => window.removeEventListener('mousedown', onGlobalMouseDown);
+  }, []);
+}

tests/Select.test.tsx

@@ -1,6 +1,7 @@
 import { mount, render } from 'enzyme';
 import KeyCode from 'rc-util/lib/KeyCode';
 import React from 'react';
+import { act } from 'react-dom/test-utils';
 import { resetWarned } from 'rc-util/lib/warning';
 import Select, { OptGroup, Option, SelectProps } from '../src';
 import focusTest from './shared/focusTest';
@@ -1411,4 +1412,27 @@ describe('Select.Basic', () => {
     expect(wrapper.find('SelectTrigger').props().visible).toBeFalsy();
     expect(wrapper.find('Input').props().editable).toBeTruthy();
   });
+
+  it('click outside to close select', () => {
+    const wrapper = mount(
+      <Select>
+        <Option value="1">One</Option>
+      </Select>,
+    );
+
+    toggleOpen(wrapper);
+
+    const clickEvent = new Event('mousedown');
+    Object.defineProperty(clickEvent, 'target', {
+      get: () => document.body,
+    });
+    act(() => {
+      window.dispatchEvent(clickEvent);
+    });
+    wrapper.update();
+
+    expectOpen(wrapper, false);
+
+    wrapper.unmount();
+  });
 });