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
kpienkowska staff answered 2 years ago
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.
kpienkowska staff answered 2 years ago
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Open
- 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