React AntD - Select resetting after filtering

Question

I have a table which has a list of item which you can select:

It works fine selecting the items across any of the pages. I recently introduced the above search option which filters the results. However if I filter then click to select an item it removes the previously set selections. I tried to pass through the selection array but I can't seem to link the dots.

The filter code:

        filterIcon: <span/>,
        filterDropdownVisible: true,
        filterDropdown: (
          <div className={styles.listFilterDropdownModal}>
            <Input
              placeholder="Search list..."
              value={listModalFilterString}
              onChange={(ev) => dispatch({
                type: "jobs/setListModalFilterString",
                listModalFilterString: ev.target.value,
              })}
            />
          </div>
        ),

Which basically gets passed into the dataSource:

       dataSource={(list || [])
        .filter(strategy => {
          // console.log(list);
          // return true;
          return list.name.toLowerCase().indexOf(listModalFilterString.toLowerCase()) !== -1
        })
        .map(list => ({
        key: `list_${list.id}`,
        ...list,
      }))}

Then the row selection code - which I think causes the issue:

       rowSelection={{
        selectedRowKeys: (listIds || defaultListIds).map(k => `list_${k}`),
        onSelect: (r, s, selectedRows) => dispatch({
          type: "job/setListIds",
          listIds: selectedRows.map(row => row.id),
        }),
      }}

The function called above just does this:

setListIds: (state, {listIds}) => ({...state, listIds})

Answer 1

You can use filterDropdown like

  filterDropdown: ({
            setSelectedKeys,
            selectedKeys,
            confirm,
            clearFilters,
        }) => {
            return (
                <div
                    style={{
                        padding: "12px",
                        background: "#fff",
                    }}
                >
                    <Input
                        placeholder={`Search ${dataIndex}`}
                        value={selectedKeys[0]}
                        onPressEnter={() => confirm()}
                        onChange={(e) =>
                            setSelectedKeys(
                                e.target.value ? [e.target.value] : []
                            )
                        }
                        style={{ marginBottom: 8, display: "block" }}
                    />
                    <Space>
                        <Button
                            type="primary"
                            onClick={() => confirm()}
                            icon={<SearchOutlined />}
                            size="small"
                            style={{ width: 90 }}
                        >
                            Search
                        </Button>
                        <Button
                            onClick={() => {
                                clearFilters();
                                confirm();
                            }}
                            size="small"
                            style={{ width: 90 }}
                        >
                            Reset
                        </Button>
                    </Space>
                </div>
            );
        },