Incorrect values are passed to `paginationTotalRenderer` at random times after searching

[davidaik]

Hello. I'm facing an issue where, sometimes, after performing a search, the total and the page buttons are showing incorrect values. I'm passing the following function to paginationTotalRenderer and I see that the console log prints values which are different from the actual search results. For example, I get Total 1 15 624 in the console when the search results found only 2 rows.

function totalRenderer(from, to, size) {
  console.log("TOTAL", from, to, size);
  return (
    <span className="react-bootstrap-table-pagination-total text-10 pl-3">
      Showing {from} to {to} of {size} Results
    </span>
  )
};

Steps to reproduce the behavior:

1. It's not easy to reproduce because it happens like 1 out of 30 or 50 or 100 times that you refresh and do a search. I have the following relevant part of the code as shown below. I believe it's pretty standard stuff.

    function pageButtonRenderer({ page, active, onPageChange }) {
        const handleClick = (e) => {
            e.preventDefault();
            onPageChange(page);
        };
        return (
            <Button
                color={active ? "primary" : "falcon-default"}
                size="sm"
                className="ml-2 mt-2"
                onClick={handleClick}
                key={page}
            >
                <div className="text-10"> {page}</div>
            </Button>
        );
    }
   
    function totalRenderer(from, to, size) {
        console.log("TOTAL", from, to, size);
        return (
            <span className="react-bootstrap-table-pagination-total text-10 pl-3">
                Showing {from} to {to} of {size} Results
            </span>
        );
    }
   
    function Options(sizePerPage, data) {
        const options = {
            sizePerPage: sizePerPage,
            paginationSize: 4,
            pageStartIndex: 1,
            alwaysShowAllBtns: false,
            withFirstAndLast: false,
            hideSizePerPage: true,
            hidePageListOnlyOnePage: true,
            firstPageText: "First",
            lastPageText: "Last",
            nextPageTitle: "First page",
            prePageTitle: "Pre page",
            firstPageTitle: "Next page",
            lastPageTitle: "Last page",
            pageButtonRenderer,
            disablePageTitle: true,
            totalSize: data.length,
            paginationTotalRenderer: totalRenderer,
            showTotal: data.length !== 0 ? true : false,
        };
        return options;
    }
   
    function SearchBar(props) {
        const handleKeyUp = (e) => {
            props.onSearch(e.target.value.toLowerCase().trim());
        };
   
        return (
            <div className="d-flex align-items-center">
                <InputGroup>
                    <Input
                        placeholder="Search"
                        className="text-10 table-search-box"
                        onKeyUp={handleKeyUp}
                        id={props.id || "fname"}
                    />
                    <InputGroupAddon addonType="append">
                        <InputGroupText>
                            <FontAwesomeIcon icon={faSearch} className="text-10" />
                        </InputGroupText>
                    </InputGroupAddon>
                </InputGroup>
            </div>
        );
    }
   
    // Table
    <PaginationProvider
        pagination={paginationFactory(Options(15, usersState.users))}
    >
        {({ paginationTableProps }) => {
            return (
                <ToolkitProvider
                    keyField="id"
                    columns={columns}
                    data={usersState.users}
                    exportCSV={{
                        fileName: "File.csv",
                        onlyExportFiltered: true,
                        exportAll: false,
                    }}
                    search
                >
                    {({ searchProps, ...props }) => {
                        return (
                            <div>
                                <FalconCardHeader
                                    title={
                                        <React.Fragment>
                                            Users&nbsp;
                                            <FontAwesomeIcon
                                                icon={["far", "question-circle"]}
                                                transform="shrink-1"
                                                className={"text-400 TextColorPrimary"}
                                                id="users_table"
                                            />
                                            <UncontrolledTooltip
                                                placement="bottom"
                                                target="users_table"
                                            >
                                                <div className="text-10">Tooltip text</div>
                                            </UncontrolledTooltip>
                                        </React.Fragment>
                                    }
                                    titleTag="h6"
                                >
                                    <Flex>
                                        <SearchBar{...searchProps} />
                                    </Flex>
                                </FalconCardHeader>
                                <div className="scrollbar">
                                    <BootstrapTable
                                        {...props.baseProps}
                                        bootstrap4
                                        noDataIndication={
                                            !hasData ? (
                                                <Loader height={"100vh"} />
                                            ) : (
                                                <NoData height={"100vh"} />
                                            )
                                        }
                                        {...paginationTableProps}
                                        classes={
                                            "table-dashboard fs--1 border-bottom border-200 mb-0 table-dashboard TextColorPrimary"
                                        }
                                        headerClasses="bg-200 text-900 border-y border-200"
                                        filterPosition="top"
                                        selectRow={selectRow}
                                        striped
                                        condensed
                                        hover
                                        wrapperClasses="standard_table_height"
                                    />
                                </div>
                            </div>
                        );
                    }}
                </ToolkitProvider>
            );
        }}
    </PaginationProvider>;
   

Screenshots

These screenshots are for the same incident where I caught the issue occurring.

Console log:

[davidaik]

Now I'm able to reproduce it 100% of the time. What I do is, I open the page containing this table, then make a search. All's good. Next, I switch to another route and then back to the page containing the table. Then make a search. I can see the bug, every single time.

[GodAlmighty990]

Project is dead