diff --git a/examples/auto-adjust-dropdown.tsx b/examples/auto-adjust-dropdown.tsx new file mode 100644 index 000000000..4c5d43740 --- /dev/null +++ b/examples/auto-adjust-dropdown.tsx @@ -0,0 +1,127 @@ +/* eslint-disable no-console */ +import React from 'react'; +import Select, { Option } from '../src'; +import '../assets/index.less'; + +class Test extends React.Component { + state = { + value: '3', + }; + + onChange = e => { + let value; + if (e && e.target) { + ({ value } = e.target); + } else { + value = e; + } + this.setState({ + value, + }); + }; + + render() { + const { value } = this.state; + + return ( +
+
+
+ +
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+ +
+
+
+ ); + } +} + +export default Test; +/* eslint-enable */ diff --git a/src/SelectTrigger.tsx b/src/SelectTrigger.tsx index 5bee5b957..46e47c22e 100644 --- a/src/SelectTrigger.tsx +++ b/src/SelectTrigger.tsx @@ -3,23 +3,28 @@ import Trigger from 'rc-trigger'; import classNames from 'classnames'; import { RenderDOMFunc } from './interface'; -const BUILT_IN_PLACEMENTS = { - bottomLeft: { - points: ['tl', 'bl'], - offset: [0, 4], - overflow: { - adjustX: 0, - adjustY: 1, +const getBuiltInPlacements = (dropdownMatchSelectWidth: number | true) => { + // Enable horizontal overflow auto-adjustment when a custom dropdown width is provided + const adjustX = typeof dropdownMatchSelectWidth !== 'number' ? 0 : 1; + + return { + bottomLeft: { + points: ['tl', 'bl'], + offset: [0, 4], + overflow: { + adjustX, + adjustY: 1, + }, }, - }, - topLeft: { - points: ['bl', 'tl'], - offset: [0, -4], - overflow: { - adjustX: 0, - adjustY: 1, + topLeft: { + points: ['bl', 'tl'], + offset: [0, -4], + overflow: { + adjustX, + adjustY: 1, + }, }, - }, + }; }; export interface RefTriggerProps { @@ -78,6 +83,11 @@ const SelectTrigger: React.RefForwardingComponent< popupNode = dropdownRender(popupElement); } + const builtInPlacements = React.useMemo( + () => getBuiltInPlacements(dropdownMatchSelectWidth), + [dropdownMatchSelectWidth], + ); + // ===================== Motion ====================== const mergedTransitionName = animation ? `${dropdownPrefixCls}-${animation}` @@ -96,7 +106,7 @@ const SelectTrigger: React.RefForwardingComponent< showAction={[]} hideAction={[]} popupPlacement="bottomLeft" - builtinPlacements={BUILT_IN_PLACEMENTS} + builtinPlacements={builtInPlacements} prefixCls={dropdownPrefixCls} popupTransitionName={mergedTransitionName} popup={
{popupNode}
} diff --git a/tests/Select.test.tsx b/tests/Select.test.tsx index f2d4bcdd5..47f1ef2a2 100644 --- a/tests/Select.test.tsx +++ b/tests/Select.test.tsx @@ -1182,6 +1182,32 @@ describe('Select.Basic', () => { ).toBe(233); }); + it('dropdown should auto-adjust horizontally when dropdownMatchSelectWidth is false', () => { + const wrapper = mount( + , + ); + expect( + wrapper.find('Trigger').props().builtinPlacements.bottomLeft.overflow + .adjustX, + ).toBe(1); + }); + + it('dropdown should not auto-adjust horizontally when dropdownMatchSelectWidth is true', () => { + const wrapper = mount( + , + ); + expect( + wrapper.find('Trigger').props().builtinPlacements.bottomLeft.overflow + .adjustX, + ).toBe(0); + }); + it('if loading, arrow should show loading icon', () => { const wrapper = mount(