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