I added DatePicker component as a filter and trying to use it, I’m getting value, but there is problem with full open component, every time when I open or close datePicker I getting Resize Loop error.
I replace on RangePicker and nothing is happen and works fine
So can just some one explain me why it works like this and how to fix this resize loop bug ?
here is my code
Styles Sass
.ant-picker-dropdown
z-index: 9999
.ant-picker
width: 280px
.ant-picker-panel-container,
.ant-picker-footer
width: 280px !important
.ant-picker-panel-container
box-shadow: none !important
.ant-picker-footer-extra > div
flex-wrap: wrap !important
.ant-picker-body
padding: 0 8px !important
.table-date-filter-spacer
height: 293px
.date-filter-dropdown // +
width: 280px
.ant-picker-footer
display: none
.ant-picker-dropdown
width: 280px !important
div
width: 100% !important
.ant-picker-panel-container
box-shadow: none !important
border-radius: 0 !important
filterDatePicker component
<div ref={refTest} style={{position: "relative"}}>
<DatePicker
className={"date-filter-dropdown"}
format="YYYY-MM-DD HH:mm:ss"
// showTime={{defaultValue: dayjs('00:00:00', 'HH:mm:ss')}}
value={selectedKeys}
onOk={handleOnChangeData}
open={isOpenDatePicker}
popupClassName="table-date-filter-container"
getPopupContainer={(trigger) => trigger.parentNode}
/>
<div className="table-date-filter-spacer"/>
<div className={"ant-table-filter-dropdown-btns"}>
<Button onClick={handleReset}>Reset</Button>
<Button onClick={() => confirm({closeDropdown: false})}>Apply filter</Button>
</div>
</div>
UseEffect in Main component
useEffect(() => {
const debouncedClosePopup = debounce(() => {
console.log('RENDER RESIZE')
setIsOpenDatePicker(false);
}, 1000);
const handleResize = () => debouncedClosePopup();
window.addEventListener('resize', debouncedClosePopup);
return () => {
window.removeEventListener('resize', handleResize);
};
}, [isOpenDatePicker]);