fix: auto dropdown placement (#710)

* chore: auto dropdown placement

* fix: dropdownMatchWidth logic

Author: zombieJ

assets/index.less

@@ -301,12 +301,15 @@
   }
 
   &-slide-up-enter&-slide-up-enter-active&-placement-bottomLeft,
-  &-slide-up-appear&-slide-up-appear-active&-placement-bottomLeft {
+  &-slide-up-appear&-slide-up-appear-active&-placement-bottomLeft,
+  &-slide-up-enter&-slide-up-enter-active&-placement-bottomRight,
+  &-slide-up-appear&-slide-up-appear-active&-placement-bottomRight {
     animation-name: rcSelectDropdownSlideUpIn;
     animation-play-state: running;
   }
 
-  &-slide-up-leave&-slide-up-leave-active&-placement-bottomLeft {
+  &-slide-up-leave&-slide-up-leave-active&-placement-bottomLeft,
+  &-slide-up-leave&-slide-up-leave-active&-placement-bottomRight {
     animation-name: rcSelectDropdownSlideUpOut;
     animation-play-state: running;
   }

docs/examples/single-animation.tsx

@@ -17,10 +17,13 @@ const Test = () => (
         allowClear
         placeholder="placeholder"
         defaultValue="lucy"
-        style={{ width: 500 }}
+        style={{ width: '100%' }}
         animation="slide-up"
         showSearch
         onChange={onChange}
+        dropdownStyle={{
+          width: 'auto',
+        }}
       >
         <Option value="jack">
           <b

src/Select.tsx

@@ -165,7 +165,7 @@ const Select = React.forwardRef(
       // Select
       onSelect,
       onDeselect,
-      dropdownMatchSelectWidth,
+      dropdownMatchSelectWidth = true,
 
       // Options
       filterOption,

src/SelectTrigger.tsx

@@ -3,7 +3,9 @@ import Trigger from 'rc-trigger';
 import classNames from 'classnames';
 import type { Placement, RenderDOMFunc } from './BaseSelect';
 
-const getBuiltInPlacements = (adjustX: number) => {
+const getBuiltInPlacements = (dropdownMatchSelectWidth: number | boolean) => {
+  // Enable horizontal overflow auto-adjustment when a custom dropdown width is provided
+  const adjustX = dropdownMatchSelectWidth === true ? 0 : 1;
   return {
     bottomLeft: {
       points: ['tl', 'bl'],
@@ -40,13 +42,6 @@ const getBuiltInPlacements = (adjustX: number) => {
   };
 };
 
-const getAdjustX = (adjustXDependencies: Pick<SelectTriggerProps, 'autoAdjustOverflow' | 'dropdownMatchSelectWidth'>) => {
-  const { autoAdjustOverflow, dropdownMatchSelectWidth } = adjustXDependencies;
-  if(!!autoAdjustOverflow) return 1;
-  // Enable horizontal overflow auto-adjustment when a custom dropdown width is provided
-  return typeof dropdownMatchSelectWidth !== 'number' ? 0 : 1
-}
-
 export interface RefTriggerProps {
   getPopupElement: () => HTMLDivElement;
 }
@@ -70,7 +65,6 @@ export interface SelectTriggerProps {
   getPopupContainer?: RenderDOMFunc;
   dropdownAlign: object;
   empty: boolean;
-  autoAdjustOverflow?: boolean;
 
   getTriggerDOMNode: () => HTMLElement;
   onPopupVisibleChange?: (visible: boolean) => void;
@@ -95,15 +89,14 @@ const SelectTrigger: React.RefForwardingComponent<RefTriggerProps, SelectTrigger
     dropdownClassName,
     direction = 'ltr',
     placement,
-    dropdownMatchSelectWidth = true,
+    dropdownMatchSelectWidth,
     dropdownRender,
     dropdownAlign,
     getPopupContainer,
     empty,
     getTriggerDOMNode,
     onPopupVisibleChange,
     onPopupMouseEnter,
-    autoAdjustOverflow,
     ...restProps
   } = props;
 
@@ -115,11 +108,8 @@ const SelectTrigger: React.RefForwardingComponent<RefTriggerProps, SelectTrigger
   }
 
   const builtInPlacements = React.useMemo(
-    () => getBuiltInPlacements(getAdjustX({
-      autoAdjustOverflow,
-      dropdownMatchSelectWidth,
-    })),
-    [dropdownMatchSelectWidth, autoAdjustOverflow],
+    () => getBuiltInPlacements(dropdownMatchSelectWidth),
+    [dropdownMatchSelectWidth],
   );
 
   // ===================== Motion ======================

tests/Select.test.tsx

@@ -1300,7 +1300,9 @@ describe('Select.Basic', () => {
         <Option value={1}>1</Option>
       </Select>,
     );
-    expect(wrapper.find('Trigger').props().builtinPlacements.bottomLeft.overflow.adjustX).toBe(1);
+    expect(
+      (wrapper.find('Trigger').prop('builtinPlacements') as any).bottomLeft.overflow.adjustX,
+    ).toBe(1);
   });
 
   it('dropdown should not auto-adjust horizontally when dropdownMatchSelectWidth is true', () => {
@@ -1310,7 +1312,9 @@ describe('Select.Basic', () => {
         <Option value={1}>1</Option>
       </Select>,
     );
-    expect(wrapper.find('Trigger').props().builtinPlacements.bottomLeft.overflow.adjustX).toBe(0);
+    expect(
+      (wrapper.find('Trigger').prop('builtinPlacements') as any).bottomLeft.overflow.adjustX,
+    ).toBe(0);
   });
 
   it('if loading, arrow should show loading icon', () => {