Undesired scrolling of modal when popconfirm or date picker


Topic: Undesired scrolling of modal when popconfirm or date picker used

RossK1 pro premium priority asked 2 years ago

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.


RossK1 pro premium priority commented 2 years ago

Snippet published. Can you check now, please.


kpienkowska staff answered 2 years ago

We will look into this problem.


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Open

Specification of the issue
  • 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