Topic: Datatable within modal modal cannot show Rows Per Page correctly

hanzc priority asked 1 year ago

Expected behavior Paginated table can display the number of records as per selection below the table

Actual behavior Case 1: Rows per page cannot be changed. Case 2: Selected 200 rows per page, successfully displayed 200 rows. But when select back to 10 rows, it remains at 200.

Resources (screenshots, code snippets etc.) I created a snippet. You can call out the modal window that displays the datatable via the button.

Thanks Mike

hanzc priority commented 1 year ago

Hi For some reason, at the point of snippet creation, it wasn't working.

Upon publishing the snippet, and re-run the codes, everything works ok.

Please advise

Mateusz Lazaru staff answered 1 year ago

I think I know what caused this problem and it is not related to the datatable itself. It happens because when the user is about to click on the select option, the content of the modal scrolls to the top (but this happens on mousedown, not on click). As a result, the select option is not clicked at all.

Try this on your own:

Open example2, try changing the pagination and see what is printed in the console. Meanwhile, example1 has its size reduced via the maxHeight dadatable option, so the modal has no scroll and the error does not appear.

If you want to keep the modal's body scrolling, another possible workaround is to force click after the mousedown event on the select option.

hanzc priority answered 1 year ago

I think if you can fix the case 1, most likely it should fix case 2 as well.

I have no idea how to reproduce case 2 in he snippet but it always happen on my local PC.

Mateusz Lazaru staff answered 1 year ago

I was only able to reproduce case 1 using your code. Do you have any advice how could I do that? I'll add it to our todo list and I hope it will be fixed soon.

hanzc priority commented 1 year ago

Hi, Any idea when this will be fixed? Are there any workaround?

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 5.0.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes