Topic: Undesired scrolling of modal when popconfirm or date picker used
Intro
Hi. I'm working on a fairly simple web app that displays data to users and then requires them to enter some additional details. As part of this, there will be a modal with accordions, one to display the data and one to hold the form entries. The problem is that the modal scrolls to the top when some elements are interacted with, as described below. Is there a fix or workaround to this? Thanks :)
Expected behavior
When the user selects the date picker (this also happens for datetime pickers) or clicks a button with a popconfirm, the modal should not scroll to the top, it should stay where it is to allow the user to keep working without having to scroll down.
Actual behavior
Clicking on the popconfirm button opens the mini popup fine, but as soon as either option is clicked, the modal scrolls to the top. Similarly, clicking on the date picker causes the modal to scroll to the top (although at least in this case it scrolls back down after a selection is made).
Resources (screenshots, code snippets etc.)
A minimal working example is shown in the snippet below. Open the modal, scroll down, expand the bottom accordion item and try clicking the date picker or the popconfirm and either of the options in it.
https://mdbootstrap.com/snippets/standard/rossk1/4964741
You need to Publish your snippets for me to be able to see it.
But for now, I can tell you that when you have popconfirm in the modal it is added dynamically to HTML. After it closes it is removed. So your 'hook' for focus disappears. It doesn't matter in regular HTML documents but in modal it does. To remedy that you can focus the button that is popconfirm toggle after it closes.
Hello,
This is still an issue after > 2 years. Refocussing on the originating button does not work. We need a way to prevent the screen from scrolling when a popconfirm is opened or interacted with. Please provide a working solution ASAP.
Thank you.
Hello, This is still an issue after > 2 years. Refocussing on the originating button does not work. We need a way to prevent the screen from scrolling when a popconfirm is opened or interacted with. Please provide a working solution ASAP. Thank you.
Hi, please upgrade to the latest version (v9.1.0), as this issue has been resolved there.
Best regards.
RossK1 pro premium priority commented 2 weeks ago
Please check the snippet again. I updated it to v9.1.0 and the problem is only partially resolved. Clicking on the button opens the popconfirm and it stays visible, but the modal still scrolls to the top. Clicking on one of the buttons on the popconfirm scrolls it back down again. The expected behaviour is zero scrolling. There is no reason to scroll the modal when a user clicks the button. Thanks :)
Please check the snippet again. I updated it to v9.1.0 and the problem is only partially resolved. Clicking on the button opens the popconfirm and it stays visible, but the modal still scrolls to the top. Clicking on one of the buttons on the popconfirm scrolls it back down again. The expected behaviour is zero scrolling. There is no reason to scroll the modal when a user clicks the button. Thanks :)
It seems like the problem is related to legacy code. I've created similar snippet following the current documentation, which has resolved the issue.
RossK1 pro premium priority commented 2 weeks ago
After a bit of testing it looks like the key is modal-dialog-scrollable. If you just have modal-dialog, the modal will scroll up and down with clicking. If you add modal-dialog-scrollable, the unwanted scrolling seems to go away. Check my snippet for comparison.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 6.1.0
- Device: PC
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes