fix: customize builtinPlacement should override builtin one (#933)

* chore: merge

* test: test case

Author: zombieJ

src/BaseSelect.tsx

@@ -1,4 +1,4 @@
-import type { AlignType } from '@rc-component/trigger/lib/interface';
+import type { AlignType, BuildInPlacements } from '@rc-component/trigger/lib/interface';
 import classNames from 'classnames';
 import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
@@ -185,6 +185,7 @@ export interface BaseSelectProps extends BaseSelectPrivateProps, React.AriaAttri
   dropdownRender?: (menu: React.ReactElement) => React.ReactElement;
   dropdownAlign?: AlignType;
   placement?: Placement;
+  builtinPlacements?: BuildInPlacements;
   getPopupContainer?: RenderDOMFunc;
 
   // >>> Focus
@@ -268,6 +269,7 @@ const BaseSelect = React.forwardRef((props: BaseSelectProps, ref: React.Ref<Base
     dropdownRender,
     dropdownAlign,
     placement,
+    builtinPlacements,
     getPopupContainer,
 
     // Focus
@@ -762,6 +764,7 @@ const BaseSelect = React.forwardRef((props: BaseSelectProps, ref: React.Ref<Base
       dropdownRender={dropdownRender}
       dropdownAlign={dropdownAlign}
       placement={placement}
+      builtinPlacements={builtinPlacements}
       getPopupContainer={getPopupContainer}
       empty={emptyOptions}
       getTriggerDOMNode={() => selectorDomRef.current}

src/SelectTrigger.tsx

@@ -1,5 +1,5 @@
 import Trigger from '@rc-component/trigger';
-import type { AlignType } from '@rc-component/trigger/lib/interface';
+import type { AlignType, BuildInPlacements } from '@rc-component/trigger/lib/interface';
 import classNames from 'classnames';
 import * as React from 'react';
 import type { Placement, RenderDOMFunc } from './BaseSelect';
@@ -64,6 +64,7 @@ export interface SelectTriggerProps {
   transitionName?: string;
   containerWidth: number;
   placement?: Placement;
+  builtinPlacements?: BuildInPlacements;
   dropdownStyle: React.CSSProperties;
   dropdownClassName: string;
   direction: string;
@@ -96,6 +97,7 @@ const SelectTrigger: React.RefForwardingComponent<RefTriggerProps, SelectTrigger
     dropdownClassName,
     direction = 'ltr',
     placement,
+    builtinPlacements,
     dropdownMatchSelectWidth,
     dropdownRender,
     dropdownAlign,
@@ -114,9 +116,9 @@ const SelectTrigger: React.RefForwardingComponent<RefTriggerProps, SelectTrigger
     popupNode = dropdownRender(popupElement);
   }
 
-  const builtInPlacements = React.useMemo(
-    () => getBuiltInPlacements(dropdownMatchSelectWidth),
-    [dropdownMatchSelectWidth],
+  const mergedBuiltinPlacements = React.useMemo(
+    () => builtinPlacements || getBuiltInPlacements(dropdownMatchSelectWidth),
+    [builtinPlacements, dropdownMatchSelectWidth],
   );
 
   // ===================== Motion ======================
@@ -146,7 +148,7 @@ const SelectTrigger: React.RefForwardingComponent<RefTriggerProps, SelectTrigger
       showAction={onPopupVisibleChange ? ['click'] : []}
       hideAction={onPopupVisibleChange ? ['click'] : []}
       popupPlacement={placement || (direction === 'rtl' ? 'bottomRight' : 'bottomLeft')}
-      builtinPlacements={builtInPlacements}
+      builtinPlacements={mergedBuiltinPlacements}
       prefixCls={dropdownPrefixCls}
       popupTransitionName={mergedTransitionName}
       popup={

tests/BaseSelect.test.tsx

@@ -1,7 +1,7 @@
+import type { OptionListProps, RefOptionListProps } from '@/OptionList';
 import { fireEvent, render } from '@testing-library/react';
-import BaseSelect from '../src/BaseSelect';
 import { forwardRef } from 'react';
-import type { OptionListProps, RefOptionListProps } from '@/OptionList';
+import BaseSelect from '../src/BaseSelect';
 
 const OptionList = forwardRef<RefOptionListProps, OptionListProps>(() => (
   <div className="popup">Popup</div>
@@ -58,4 +58,29 @@ describe('BaseSelect', () => {
     ).toBe('absolute');
     jest.useRealTimers();
   });
+
+  it('customize builtinPlacements should override default one', () => {
+    const { container } = render(
+      <BaseSelect
+        prefixCls="rc-select"
+        id="test"
+        displayValues={[]}
+        onDisplayValuesChange={() => {}}
+        searchValue=""
+        onSearch={() => {}}
+        OptionList={OptionList}
+        emptyOptions
+        open
+        // Test content
+        builtinPlacements={{
+          // placement not exist in `builtinPlacements`,
+          // which means this will be same as empty one.
+          // It's safe to test in other way if refactor
+          fallback: {},
+        }}
+      />,
+    );
+
+    expect(container.querySelector('.rc-select-dropdown-placement-fallback')).toBeTruthy();
+  });
 });