Topic: Page scrolls up when some modals are closed

UNNdev priority asked 1 year ago


Did anyone ever experience the problem that closing a modal would scroll the page a few lines to the top? Unfortunately, I cannot reproduce this in the sandbox and even in my project, it doesn't happen with all modals and I wasn't able to track down what might be causing this behavior.

MDB team, do you have any hints - maybe some gotchas that are not obvious and I should pay attention to?


Dawid Wajszczuk staff commented 1 year ago

Hi. We didn't encounter such issue. The only thing that comes to my mind is focus trap. Modal has one and it might be responsible for such behavior. You can try to:

  1. focus (probably modal toggler) element
  2. scroll page (without losing focus on that element)
  3. open modal with enter
  4. close modal

UNNdev priority commented 1 year ago

Thanks for the input. I tried your suggested instructions and I get the same behavior. Weird, I thought the ripple effect on the button toggling the modal could be responsible, but I have other buttons that trigger modals and they don't exhibit this behavior. I also have some links that open modals and some show the problem, some don't.

I am going to try to swap the triggered modals and see if the problem is caused by the modal itself or by the triggering element.


UNNdev priority commented 1 year ago

OK, it must be caused by the triggering element, or something related to it. If I swap the modal with one that does not cause an issue when triggered by another element, I suddenly get the same erroneous behavior. πŸ€”


UNNdev priority commented 1 year ago

It happens because modals re-focus the triggering element on close. I get the same scrolling problem if I simply do a document.getElementById('myId').focus() in the console.


UNNdev priority commented 1 year ago

The focus method can be passed { preventScroll: true } on supported browsers. https://webplatform.news/issues/2019-04-19#preventing-scroll-into-view-when-calling-focus describes that this is especially useful "when dynamically restoring focus after the user closes a modal dialog or reopens a tab panel". Can you please consider using this when closing modals or is it something that I have to raise in Bootstrap?


Dawid Wajszczuk staff commented 1 year ago

Hi. This is related to Bootstrap's code. This means that you have to make PR in their repository, which BTW is already made https://github.com/twbs/bootstrap/pull/35393. I'm not sure though if making this change in their focus trap wouldn't be a better solution.


UNNdev priority answered 1 year ago


The problem is caused by a combination of modals re-focusing the triggering element on close and CSS scroll-padding-top being used on the document. I created a PR for Bootstrap:

https://github.com/twbs/bootstrap/pull/35393

The link also includes Codepen examples showing the issue and how calling focus({ preventScroll: true }) mitigates the problem.


Dawid Wajszczuk staff commented 1 year ago

I didn't see your message while I was writing mine ;) Thanks for this detailed explanation.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

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