Remote Search: onSearch only triggers onTableChange if the input has changed

[ethannkschneider]

Hi - great library!

I am using the remote-all feature (with Toolkit Provider) and am wondering how I can get a bit more control over the search functionality.

I have a custom search component that receives the tkProps.searchProps and fires the onSearch callback when the user searches. Normally, calling onSearch will trigger the onTableChange callback in the bootstrap table; however, this seems to only happen when the value of the search input has changed. Perhaps this is to prevent the user from spamming the search button. The issue is that I have extra dropdowns that the user can choose to modify their search criteria. Since these are not within the scope of the react bootstrap table code, changing these values doesn't allow the user to hit 'search' again and trigger the onTableSearch callback, if they have not changed the input value.

What I would like is a way to ensure calling the onSearch prop in the search component to always trigger the onTableChange prop in the bootstrap table. Is this possible? I have some hacky custom code in place to help with this, but am wondering if there is a react-bootstrap-table way to do this. Thanks!

I tried following this example.

My guess at where this behavior originates from is here.

My code is below.

TableComponent:

<ToolkitProvider
            keyField={keyField}
            data={items}
            columns={columns}
            bootstrap4
            search>
            {
                (tkProps) => (
                    <div>
                        <MySearch
                            {...tkProps.searchProps}
                            entityDisplayName={entityDisplayName}
                            searchTypeOptions={searchTypeOptions}
                            selectedSearchType={selectedSearchType}
                            selectedFilters={selectedFilters}
                            onSearchTypeChange={onSearchTypeChange}
                            searchTypeTooltip={searchTypeTooltip}
                            onReset={onReset}
                        />
...

MySearch component (render method):

    return (<div className="container-fluid">
        <div className="my-2 row align-items-center justify-content-between">
            <div className="col-auto">
                <div className="row">
                    <label> Search { entityDisplayName }:
                        <input
                            className="form-control"
                            ref={(n) => input = n} // eslint-disable-line
                            type="text"
                            onKeyPress={handleEnter}
                        />
                    </label>
...

[ethannkschneider]

Perhaps what I'm trying to do is make the code in the ToolkitProvider/context.js go from this:

onSearch(searchText) {
    if (searchText !== this.state.searchText) {
      this.setState({ searchText });
    }
  }

to this:

onSearch(searchText) {
    this.setState({ searchText });
  }

[ethannkschneider]

Sticking with my hacky workaround for now (it involves adding a datestring to the search text to ensure uniqueness). I don't see anything about this in the API so I will assume it is not supported.