filterDropdown propagation problem

[gosvoh]

I have a custom table filter:

const getColumnProps = (
  dataIndex: (keyof Filter)[]
): TableColumnType<ColType> => ({
  filterDropdown: ({
    setSelectedKeys,
    selectedKeys,
    confirm,
    clearFilters,
    close,
  }) => (
    <Space
      direction="vertical"
      style={{ padding: "1rem" }}
      onKeyDown={(e) => e.stopPropagation()}
    >
      <DatePicker.RangePicker
        value={
          selectedKeys as unknown as React.ComponentProps<
            typeof DatePicker.RangePicker
          >["value"]
        }
        format="LLL"
        onChange={(value) => setSelectedKeys(value as any)}
      />
      <Space>
        <Button
          type="primary"
          onClick={() => {
            confirm({ closeDropdown: true });
            if (!selectedKeys[0] && !selectedKeys[1])
              setFilter((filter) => {
                dataIndex.forEach((dataIndex) => delete filter[dataIndex]);
              });
            else
              setFilter((f) => {
                dataIndex.forEach((dataIndex, i) => {
                  (f[dataIndex] as string) = (
                    selectedKeys[i] as unknown as dayjs.Dayjs
                  ).toISOString();
                });
              });
          }}
          icon={<SearchOutlined />}
          size="small"
        >
          Filter
        </Button>
        <Button
          onClick={() => handleReset(clearFilters, dataIndex)}
          size="small"
        >
          Reset
        </Button>
        <Button type="link" size="small" onClick={close}>
          Close
        </Button>
      </Space>
    </Space>
  ),
  filterIcon: (filtered: boolean) => (
    <SearchOutlined style={{ color: filtered ? "#1677ff" : undefined }} />
  ),
});

But when I try to select a date the popup just closes

2024-05-18.125108.mp4

Is there any way to fix this?

[aljik95]

Additional question :
how can we handle reset all inputs through button outside column props .?
Thanks.

[gosvoh]

The first thing that comes to mind is to store clearFilters in a ref array and call it via forEach when the button is pressed

[aljik95]

yeah but it will only clear the inputs but to like return the original form of the table is like my question. Is it possible ?

[nouman2075]

Pass getPopupContainer={(triggerNode) => triggerNode.parentNode as HTMLElement} to <DatePicker.RangePicker ...