From 8bbfd7b367a6b30a943c2f9fc0526f1a424d47d6 Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Wed, 19 Jan 2022 22:10:24 +0800
Subject: [PATCH 1/2] chore: auto dropdown placement

---
 assets/index.less     |  7 ++--
 src/SelectTrigger.tsx | 79 ++++++++++++++++---------------------------
 2 files changed, 35 insertions(+), 51 deletions(-)

diff --git a/assets/index.less b/assets/index.less
index 6f2fce48e..fb19012f7 100644
--- a/assets/index.less
+++ b/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;
   }
diff --git a/src/SelectTrigger.tsx b/src/SelectTrigger.tsx
index 4853909bd..08fc03a20 100644
--- a/src/SelectTrigger.tsx
+++ b/src/SelectTrigger.tsx
@@ -3,50 +3,41 @@ import Trigger from 'rc-trigger';
 import classNames from 'classnames';
 import type { Placement, RenderDOMFunc } from './BaseSelect';
 
-const getBuiltInPlacements = (adjustX: number) => {
-  return {
-    bottomLeft: {
-      points: ['tl', 'bl'],
-      offset: [0, 4],
-      overflow: {
-        adjustX,
-        adjustY: 1,
-      },
+const BUILT_IN_PLACEMENTS = {
+  bottomLeft: {
+    points: ['tl', 'bl'],
+    offset: [0, 4],
+    overflow: {
+      adjustX: 1,
+      adjustY: 1,
     },
-    bottomRight: {
-      points: ['tr', 'br'],
-      offset: [0, 4],
-      overflow: {
-        adjustX,
-        adjustY: 1,
-      },
+  },
+  bottomRight: {
+    points: ['tr', 'br'],
+    offset: [0, 4],
+    overflow: {
+      adjustX: 1,
+      adjustY: 1,
     },
-    topLeft: {
-      points: ['bl', 'tl'],
-      offset: [0, -4],
-      overflow: {
-        adjustX,
-        adjustY: 1,
-      },
+  },
+  topLeft: {
+    points: ['bl', 'tl'],
+    offset: [0, -4],
+    overflow: {
+      adjustX: 1,
+      adjustY: 1,
     },
-    topRight: {
-      points: ['br', 'tr'],
-      offset: [0, -4],
-      overflow: {
-        adjustX,
-        adjustY: 1,
-      },
+  },
+  topRight: {
+    points: ['br', 'tr'],
+    offset: [0, -4],
+    overflow: {
+      adjustX: 1,
+      adjustY: 1,
     },
-  };
+  },
 };
 
-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 +61,6 @@ export interface SelectTriggerProps {
   getPopupContainer?: RenderDOMFunc;
   dropdownAlign: object;
   empty: boolean;
-  autoAdjustOverflow?: boolean;
 
   getTriggerDOMNode: () => HTMLElement;
   onPopupVisibleChange?: (visible: boolean) => void;
@@ -103,7 +93,6 @@ const SelectTrigger: React.RefForwardingComponent<RefTriggerProps, SelectTrigger
     getTriggerDOMNode,
     onPopupVisibleChange,
     onPopupMouseEnter,
-    autoAdjustOverflow,
     ...restProps
   } = props;
 
@@ -114,14 +103,6 @@ const SelectTrigger: React.RefForwardingComponent<RefTriggerProps, SelectTrigger
     popupNode = dropdownRender(popupElement);
   }
 
-  const builtInPlacements = React.useMemo(
-    () => getBuiltInPlacements(getAdjustX({
-      autoAdjustOverflow,
-      dropdownMatchSelectWidth,
-    })),
-    [dropdownMatchSelectWidth, autoAdjustOverflow],
-  );
-
   // ===================== Motion ======================
   const mergedTransitionName = animation ? `${dropdownPrefixCls}-${animation}` : transitionName;
 
@@ -149,7 +130,7 @@ const SelectTrigger: React.RefForwardingComponent<RefTriggerProps, SelectTrigger
       showAction={onPopupVisibleChange ? ['click'] : []}
       hideAction={onPopupVisibleChange ? ['click'] : []}
       popupPlacement={placement || (direction === 'rtl' ? 'bottomRight' : 'bottomLeft')}
-      builtinPlacements={builtInPlacements}
+      builtinPlacements={BUILT_IN_PLACEMENTS}
       prefixCls={dropdownPrefixCls}
       popupTransitionName={mergedTransitionName}
       popup={

From 08c25cbe85a642fd794270750fba3c2e31a11424 Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Wed, 19 Jan 2022 22:27:11 +0800
Subject: [PATCH 2/2] fix: dropdownMatchWidth logic

---
 docs/examples/single-animation.tsx |  5 ++-
 src/Select.tsx                     |  2 +-
 src/SelectTrigger.tsx              | 71 +++++++++++++++++-------------
 tests/Select.test.tsx              |  8 +++-
 4 files changed, 51 insertions(+), 35 deletions(-)

diff --git a/docs/examples/single-animation.tsx b/docs/examples/single-animation.tsx
index 5d6b7a53b..b4a70b94c 100644
--- a/docs/examples/single-animation.tsx
+++ b/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
diff --git a/src/Select.tsx b/src/Select.tsx
index 93aaf213f..8ac3c8937 100644
--- a/src/Select.tsx
+++ b/src/Select.tsx
@@ -165,7 +165,7 @@ const Select = React.forwardRef(
       // Select
       onSelect,
       onDeselect,
-      dropdownMatchSelectWidth,
+      dropdownMatchSelectWidth = true,
 
       // Options
       filterOption,
diff --git a/src/SelectTrigger.tsx b/src/SelectTrigger.tsx
index 08fc03a20..00d051b72 100644
--- a/src/SelectTrigger.tsx
+++ b/src/SelectTrigger.tsx
@@ -3,39 +3,43 @@ import Trigger from 'rc-trigger';
 import classNames from 'classnames';
 import type { Placement, RenderDOMFunc } from './BaseSelect';
 
-const BUILT_IN_PLACEMENTS = {
-  bottomLeft: {
-    points: ['tl', 'bl'],
-    offset: [0, 4],
-    overflow: {
-      adjustX: 1,
-      adjustY: 1,
+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'],
+      offset: [0, 4],
+      overflow: {
+        adjustX,
+        adjustY: 1,
+      },
     },
-  },
-  bottomRight: {
-    points: ['tr', 'br'],
-    offset: [0, 4],
-    overflow: {
-      adjustX: 1,
-      adjustY: 1,
+    bottomRight: {
+      points: ['tr', 'br'],
+      offset: [0, 4],
+      overflow: {
+        adjustX,
+        adjustY: 1,
+      },
     },
-  },
-  topLeft: {
-    points: ['bl', 'tl'],
-    offset: [0, -4],
-    overflow: {
-      adjustX: 1,
-      adjustY: 1,
+    topLeft: {
+      points: ['bl', 'tl'],
+      offset: [0, -4],
+      overflow: {
+        adjustX,
+        adjustY: 1,
+      },
     },
-  },
-  topRight: {
-    points: ['br', 'tr'],
-    offset: [0, -4],
-    overflow: {
-      adjustX: 1,
-      adjustY: 1,
+    topRight: {
+      points: ['br', 'tr'],
+      offset: [0, -4],
+      overflow: {
+        adjustX,
+        adjustY: 1,
+      },
     },
-  },
+  };
 };
 
 export interface RefTriggerProps {
@@ -85,7 +89,7 @@ const SelectTrigger: React.RefForwardingComponent<RefTriggerProps, SelectTrigger
     dropdownClassName,
     direction = 'ltr',
     placement,
-    dropdownMatchSelectWidth = true,
+    dropdownMatchSelectWidth,
     dropdownRender,
     dropdownAlign,
     getPopupContainer,
@@ -103,6 +107,11 @@ const SelectTrigger: React.RefForwardingComponent<RefTriggerProps, SelectTrigger
     popupNode = dropdownRender(popupElement);
   }
 
+  const builtInPlacements = React.useMemo(
+    () => getBuiltInPlacements(dropdownMatchSelectWidth),
+    [dropdownMatchSelectWidth],
+  );
+
   // ===================== Motion ======================
   const mergedTransitionName = animation ? `${dropdownPrefixCls}-${animation}` : transitionName;
 
@@ -130,7 +139,7 @@ const SelectTrigger: React.RefForwardingComponent<RefTriggerProps, SelectTrigger
       showAction={onPopupVisibleChange ? ['click'] : []}
       hideAction={onPopupVisibleChange ? ['click'] : []}
       popupPlacement={placement || (direction === 'rtl' ? 'bottomRight' : 'bottomLeft')}
-      builtinPlacements={BUILT_IN_PLACEMENTS}
+      builtinPlacements={builtInPlacements}
       prefixCls={dropdownPrefixCls}
       popupTransitionName={mergedTransitionName}
       popup={
diff --git a/tests/Select.test.tsx b/tests/Select.test.tsx
index 3e63a6507..2105312e0 100644
--- a/tests/Select.test.tsx
+++ b/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', () => {