fix: DatePicker/TimePicker placement not working (#49303)

* fix: DatePicker/TimePicker placement not working

* revert demo change
This commit is contained in:
afc163 2024-06-08 21:59:21 +08:00 committed by GitHub
parent a75571013b
commit 539beba6ed
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 18 additions and 1 deletions

View File

@ -355,13 +355,25 @@ describe('DatePicker', () => {
expect(container.querySelectorAll('.ant-picker-time-panel').length).toBe(1);
});
it('placement api work correctly', () => {
it('DatePicker placement api work correctly', () => {
const { rerender } = render(<DatePicker open placement="topLeft" />);
expect(triggerProps?.popupPlacement).toEqual('topLeft');
rerender(<DatePicker open placement="topRight" />);
expect(triggerProps?.popupPlacement).toEqual('topRight');
rerender(<DatePicker open placement="bottomLeft" />);
expect(triggerProps?.popupPlacement).toEqual('bottomLeft');
rerender(<DatePicker open placement="bottomRight" />);
expect(triggerProps?.popupPlacement).toEqual('bottomRight');
});
it('RangePicker placement api work correctly', () => {
const { rerender } = render(<DatePicker.RangePicker open placement="topLeft" />);
expect(triggerProps?.builtinPlacements).toEqual(
expect.objectContaining({
topLeft: expect.objectContaining({ offset: [0, -4], points: ['bl', 'tl'] }),
}),
);
expect(triggerProps?.popupPlacement).toEqual('topLeft');
rerender(<DatePicker.RangePicker open placement="topRight" />);
expect(triggerProps?.builtinPlacements).toEqual(
@ -369,6 +381,7 @@ describe('DatePicker', () => {
topRight: expect.objectContaining({ offset: [0, -4], points: ['br', 'tr'] }),
}),
);
expect(triggerProps?.popupPlacement).toEqual('topRight');
rerender(<DatePicker.RangePicker open placement="bottomLeft" />);
expect(triggerProps?.builtinPlacements).toEqual(
@ -376,6 +389,7 @@ describe('DatePicker', () => {
bottomLeft: expect.objectContaining({ offset: [0, 4], points: ['tl', 'bl'] }),
}),
);
expect(triggerProps?.popupPlacement).toEqual('bottomLeft');
rerender(<DatePicker.RangePicker open placement="bottomRight" />);
expect(triggerProps?.builtinPlacements).toEqual(
@ -383,6 +397,7 @@ describe('DatePicker', () => {
bottomRight: expect.objectContaining({ offset: [0, 4], points: ['tr', 'br'] }),
}),
);
expect(triggerProps?.popupPlacement).toEqual('bottomRight');
});
it('legacy dropdownClassName', () => {

View File

@ -116,6 +116,7 @@ export default function generateRangePicker<DateType extends AnyObject>(
disabled={mergedDisabled}
ref={innerRef as any} // Need to modify PickerRef
popupAlign={transPlacement2DropdownAlign(direction, placement)}
placement={placement}
placeholder={getRangePlaceholder(locale, picker, placeholder)}
suffixIcon={suffixNode}
prevIcon={<span className={`${prefixCls}-prev-icon`} />}

View File

@ -151,6 +151,7 @@ export default function generatePicker<DateType extends AnyObject>(
placeholder={getPlaceholder(locale, mergedPicker, placeholder)}
suffixIcon={suffixNode}
dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
placement={placement}
prevIcon={<span className={`${prefixCls}-prev-icon`} />}
nextIcon={<span className={`${prefixCls}-next-icon`} />}
superPrevIcon={<span className={`${prefixCls}-super-prev-icon`} />}