New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Bootstrap 5.2.0-beta1 scrollable Modal's Footer buttons not accessible on Safari 15.5 #36739
Comments
Perhaps addressed by #36401? |
While my example only shows a dismiss button in the footer, I also had a form element wrapping the modal-body and modal-footer with a submit button in the modal-footer. It behaved the same way as the cancel. |
I am not sure, that I can understand the issue. But a replication of the above markup seems to work correctly, https://codepen.io/GeosSV/pen/vYRgXKx. Can you help me, in case I am missing something? |
Let me work up a more detailed CodePen using 5.2.0-beta1 as that's what I'm using. I added an event handler to set focus on an input when the dialog has been shown. When I removed that, I did not get the behavior with the buttons in the modal-footer. Let me see if I can make a more detailed example. Perhaps I left something important out. |
Having difficulty replicating this in CodePen even though it's 100% reproducible in my SvelteKit app. This is closer to the full example... https://codepen.io/nstuyvesant/pen/poLRNpb?editors=1010. Several things have to happen for the problem to occur:
With this combination of things, clicking buttons in the modal-footer will scroll the modal and set the focus on the close button. I even tried
If I scroll to the modal-footer before the timeout of 5 seconds, the buttons work normally. Once focus() is called, the odd behavior begins. |
Here's a video of the behavior... |
I will disappoint you 😞 |
I can't recreate it in CodePen for some reason yet it's 100% reproducible in my SveteKit project both using vite as the dev server and in production builds. Very frustrating. |
I am going to close this. Please, if you find a way to replicate, you may re-open the issue |
I have a Modal that has enough content that it requires scrolling in order to see the Cancel (and Save) buttons in the modal-footer.
If I use Safari 15.5 on macOS 12.4, the modals are displayed correctly; however, when I scroll to the modal-footer then click on either the Cancel or Save buttons, the click on the buttons is not accepted and the modal scrolls back to the top.
The problem is entirely due to the need to scroll. If the modal-body can be displayed without scrolling, the buttons in the modal-footer work fine.
On Chrome 103 and Firefox 102 on the same machine, the problem does not occur.
This HTML will reproduce the issue on Safari 15.5...
The text was updated successfully, but these errors were encountered: