Topic: Page scrolls up when some modals are closed
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?
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 2 years ago
I didn't see your message while I was writing mine ;) Thanks for this detailed explanation.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: 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
Dawid Wajszczuk staff commented 2 years 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:
UNNdev priority commented 2 years 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 2 years 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 2 years 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 2 years ago
The
focusmethod 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 2 years 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.