Adding FilterDate in ANTD table component

  Kiến thức lập trình

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]);

Theme wordpress giá rẻ Theme wordpress giá rẻ Thiết kế website

LEAVE A COMMENT