diff --git a/package.json b/package.json index e1633aea0..499c70c83 100644 --- a/package.json +++ b/package.json @@ -53,8 +53,8 @@ "rc-virtual-list": "^3.2.0" }, "devDependencies": { - "@types/enzyme": "^3.10.5", - "@types/jest": "^26.0.0", + "@types/enzyme": "^3.10.9", + "@types/jest": "^26.0.24", "@types/react": "^17.0.15", "@types/react-dom": "^17.0.3", "cross-env": "^7.0.0", diff --git a/src/SelectTrigger.tsx b/src/SelectTrigger.tsx index cad9d1bfc..f418eee6b 100644 --- a/src/SelectTrigger.tsx +++ b/src/SelectTrigger.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import Trigger from 'rc-trigger'; import classNames from 'classnames'; import type { RenderDOMFunc } from './interface'; +import type { Placement } from './generate'; const getBuiltInPlacements = (dropdownMatchSelectWidth: number | boolean) => { // Enable horizontal overflow auto-adjustment when a custom dropdown width is provided @@ -57,6 +58,7 @@ export interface SelectTriggerProps { animation?: string; transitionName?: string; containerWidth: number; + placement?: Placement; dropdownStyle: React.CSSProperties; dropdownClassName: string; direction: string; @@ -86,6 +88,7 @@ const SelectTrigger: React.RefForwardingComponent getBuiltInPlacements(dropdownMatchSelectWidth), [ - dropdownMatchSelectWidth, - ]); + const builtInPlacements = React.useMemo( + () => getBuiltInPlacements(dropdownMatchSelectWidth), + [dropdownMatchSelectWidth], + ); // ===================== Motion ====================== const mergedTransitionName = animation ? `${dropdownPrefixCls}-${animation}` : transitionName; @@ -133,7 +137,7 @@ const SelectTrigger: React.RefForwardingComponent extends React.AriaAttributes { prefixCls?: string; id?: string; @@ -119,6 +121,7 @@ export interface SelectProps extends Re dropdownStyle?: React.CSSProperties; dropdownClassName?: string; dropdownMatchSelectWidth?: boolean | number; + placement?: Placement; virtual?: boolean; dropdownRender?: (menu: React.ReactElement) => React.ReactElement; dropdownAlign?: any; @@ -301,6 +304,7 @@ export default function generateSelector< getPopupContainer, // Dropdown + placement, listHeight = 200, listItemHeight = 20, animation, @@ -1075,6 +1079,7 @@ export default function generateSelector< dropdownMatchSelectWidth={dropdownMatchSelectWidth} dropdownRender={dropdownRender} dropdownAlign={dropdownAlign} + placement={placement} getPopupContainer={getPopupContainer} empty={!mergedOptions.length} getTriggerDOMNode={() => selectorDomRef.current} diff --git a/tests/Select.test.tsx b/tests/Select.test.tsx index a95ff9557..dd808cd85 100644 --- a/tests/Select.test.tsx +++ b/tests/Select.test.tsx @@ -1680,4 +1680,21 @@ describe('Select.Basic', () => { wrapper.find('input.rc-select-selection-search-input').getDOMNode().getAttribute('tabindex'), ).toBe('0'); }); + + describe('placement', () => { + it('default', () => { + const wrapper = mount(); + expect(wrapper.find('Trigger').prop('popupPlacement')).toEqual('bottomRight'); + }); + + it('customize', () => { + const wrapper = mount(