Pagination dropdown getting close when setState({ data })

[dekelb]

I'm using react-bootstrap-table with remote data and fetching the data every few seconds to update the table.

<BootstrapTable
    remote={ true }
    data={ this.state.data }
    ....

And when fetching the data I use setState({ data }).

If I open the pagination menu - once the component is refreshed with the data from the server - the dropdown is getting closed automatically.

I'm using version 3.0.0

Is there something I can do to keep the pagination dropdown open?

[AllenFang]

sorry for lately reply cause of my busy job...

If I open the pagination menu - once the component is refreshed with the data from the server - the dropdown is getting closed automatically.

yap, it's not a bug, because a re-render happen via setState

Is there something I can do to keep the pagination dropdown open?

there's no any good way to achieve easily, but you can custom the dropdown and keep it always open, check this and add a props hidden={ false } on SizePerPageDropDown

Ley me know if you have any questions, thanks

[dekelb]

Thanks for the fast reply @AllenFang!
Actually - if there was a callback on the open/close dropdown of the PaginationList it would be much easier.

What do you think? I can add a PR for this one, will you merge it?
Thanks!

[AllenFang]

Actually - if there was a callback on the open/close dropdown of the PaginationList it would be much easier.

I can try to add this, so is that helpful for you? I think a return bool value can perform the dropdown open/close maybe is what you want.

[dekelb]

My thinking was that I can stop the refreshing from the server while the dropdown is open, and when the dropdown is closed I will renew the requests.

This way - the component will not re-render while the dropdown is open (because there will be no new requests).

[AllenFang]

sorry, I got misunderstand, for your mentioned before, I will try to support a callback on dropdown for open/close, thanks

[dekelb]

Do you prefer that I provide a PR for that?

[AllenFang]

@dekelb, I think I can handle it, take your time :)

[AllenFang]

@dekelb, I've try to implement but I found some situation here.

Firstly, bootstrap dropdown can be close via clicking the outside of dropdown itself, so if you want to know the dropdown close by this way, you need to use bootstrap.js, but react-bootstrap-table doesn't depend on it, you can check DropDown Event document,

so my recommendation is you can know it open/close via native bootstrap event, like the above reference but you need to know the DOM id or class, so I'll add a general class name on dropdown for you can get the DOM via jQuery or javascript. And I wont support the callback for you, because i can't listen the open/close event when clicking outside of dropdown, thanks

[AllenFang]

Try v3.1.8, you can get the dropdown DOM via .react-bs-table-sizePerPage-dropdown and register it with DropDown Events