fix: customized inputElement should not trigger close when mousedown …

…trigger (#761)

* fix: customized trigger should not trigger close when mousedown trigger

* chore: code clean

* fix: null check

package.json

@@ -53,6 +53,7 @@
     "rc-virtual-list": "^3.2.0"
   },
   "devDependencies": {
+    "@testing-library/react": "12",
     "@types/enzyme": "^3.10.9",
     "@types/jest": "^26.0.24",
     "@types/react": "^17.0.15",

src/BaseSelect.tsx

@@ -636,6 +636,7 @@ const BaseSelect = React.forwardRef((props: BaseSelectProps, ref: React.Ref<Base
     () => [containerRef.current, triggerRef.current?.getPopupElement()],
     triggerOpen,
     onToggleOpen,
+    !!customizeRawInputElement,
   );
 
   // ============================ Context =============================

src/hooks/useSelectTriggerControl.ts

@@ -4,15 +4,22 @@ export default function useSelectTriggerControl(
   elements: () => (HTMLElement | undefined)[],
   open: boolean,
   triggerOpen: (open: boolean) => void,
+  customizedTrigger: boolean,
 ) {
   const propsRef = React.useRef(null);
   propsRef.current = {
     open,
     triggerOpen,
+    customizedTrigger,
   };
 
   React.useEffect(() => {
     function onGlobalMouseDown(event: MouseEvent) {
+      // If trigger is customized, Trigger will take control of popupVisible
+      if (propsRef.current?.customizedTrigger) {
+        return;
+      }
+
       let target = event.target as HTMLElement;
 
       if (target.shadowRoot && event.composed) {

tests/BaseSelect.test.tsx

@@ -0,0 +1,37 @@
+import { fireEvent, render } from '@testing-library/react';
+import BaseSelect from '../src/BaseSelect';
+import { forwardRef } from 'react';
+import type { OptionListProps, RefOptionListProps } from '@/OptionList';
+
+const OptionList = forwardRef<RefOptionListProps, OptionListProps>(() => (
+  <div className="popup">Popup</div>
+));
+
+describe('BaseSelect', () => {
+  it('customized inputElement should trigger popup properly', () => {
+    const { container } = render(
+      <BaseSelect
+        prefixCls="rc-select"
+        getRawInputElement={() => (
+          <a className="trigger" href="#">
+            trigger
+          </a>
+        )}
+        OptionList={OptionList}
+        displayValues={[]}
+        emptyOptions
+        id="test"
+        onDisplayValuesChange={() => {}}
+        onSearch={() => {}}
+        searchValue=""
+      />,
+    );
+    expect(container.querySelector('div.popup')).toBeFalsy();
+    fireEvent.click(container.querySelector('a.trigger'));
+    expect(container.querySelector('div.popup')).toBeTruthy();
+    fireEvent.mouseDown(container.querySelector('a.trigger'));
+    expect(container.querySelector('div.rc-select-dropdown-hidden')).toBeFalsy();
+    fireEvent.click(container.querySelector('a.trigger'));
+    expect(container.querySelector('div.rc-select-dropdown-hidden')).toBeTruthy();
+  });
+});