React-bootstrap-table2: pagination dropdown is not closing after selecting an Option.

[telltokichu]

clicking on the sizeperpage pagination dropdown is working but after selecting no of records to be shown in a page for example 5,10,25. the Dropdown is not closing.

[chunming-c]

Hi @telltokichu:

I didn't get your point. Could you describe in more detail or share the source code please. Thanks :)

[telltokichu]

Hi @Chun-MingChen
I have zipped a video, please check out.
Thanks in advance.

rbtp2_issue.zip

[AllenFang]

@telltokichu I think there's a little different in your video? can I confirm following items?

1. What bootstrap version you use
2. Do you really use react-bootstrap-table-next or legacy react-bootstrap-table?

The different I saw is the page option is an anchor(link) instead of a normal selection option, you can check online demo example, you will understand what I means

[telltokichu]

@AllenFang
I am using Bootstrap version 4.0.0 and react-bootstrap-table-next.

[AllenFang]

@telltokichu understand, please check https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/getting-started.html#add-css

We are not support bootstrap@4 yet, it's sorry about that but we are already working on it, I will mention here when we finish it, thanks!

[telltokichu]

@AllenFang
Here mentioned like Compatible for Bootstrap 3 and 4 that's why I used but no issues I got the answer.
Thanks.

[AllenFang]

@telltokichu understand, sorry for this kind of wrong information, we will implement it ASAP, thanks

[LuisUrrutia]

@AllenFang I had a similar issue with BS4 and I used this package 'cause the website says that is BS4 compatible, but isn't.
However, how can I contribute to BS4 implementation?

[Thebarda]

It's maybe too late but you can use this code to manually close that dropdown menu ;) :

onSizePerPageChange: () => { 
  document.getElementsByClassName('dropdown-menu show')[0].classList.remove('show')
},

[jrotoni]

@Thebarda where to add that lines of code? Thank you!

[Thebarda]

@jrotoni Here is the doc ;)
https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html

[jrotoni]

@Thebarda I'm still encountering error such as "Cannot read property 'classList' of undefined". Thank you anyway :)

[Thebarda]

@jrotoni I guess there is no 'dropdown-menu show' class attribute inside your DOM. Please, could verify that by navigating inside your HTML page :)

[AllenFang]

Support bootstrap4 from [email protected]: https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/bootstrap4.html

[LarryKetone]

@AllenFang, how do I make it, clear, without first clicking it allows for dropdown edits in bootstrap table 1