Skip to content
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

Closed
nstuyvesant opened this issue Jul 14, 2022 · 9 comments
Labels

Comments

@nstuyvesant
Copy link

nstuyvesant commented Jul 14, 2022

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...

<div
	class="modal fade show"
	id="workshopModal"
	aria-labelledby="workshopModalTitle"
	style="display: block; padding-left: 0px"
	aria-modal="true"
	role="dialog"
>
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="workshopModalTitle">Modal Title</h5>
				<button
					type="button"
					data-bs-dismiss="modal"
					class="btn-close"
					aria-label="Close"
				></button>
			</div>
			<div class="modal-body" style="min-height: 80rem">Whatever</div>
			<div class="modal-footer">
				<button data-bs-dismiss="modal" type="button" class="btn btn-secondary">
					Cancel
				</button>
			</div>
		</div>
	</div>
</div>
@mdo
Copy link
Member

mdo commented Jul 14, 2022

Perhaps addressed by #36401?

@nstuyvesant
Copy link
Author

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.

@GeoSot
Copy link
Member

GeoSot commented Jul 16, 2022

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?

@nstuyvesant
Copy link
Author

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.

@nstuyvesant
Copy link
Author

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:

  1. You must use Bootstrap 5.2.0-beta1.
  2. The modal should be opened via JavaScript rather than data attributes.
  3. The modal must have at least one input.
  4. Buttons must be in the modal-footer. The cancel button can use data attributes to dismiss the modal.
  5. Modal content must be so long that the buttons in the modal-footer are not initially visible.
  6. The methods .focus() or .select() are called on an input on 'shown.bs.modal' event.

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

    setTimeout(() => {
      const title = document.getElementById('title')
      title?.focus()
    }, 5000)

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.

@nstuyvesant
Copy link
Author

@GeoSot
Copy link
Member

GeoSot commented Jul 20, 2022

I will disappoint you 😞
I tried your example in multiple browsers without getting any glitch

@nstuyvesant
Copy link
Author

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.

@GeoSot
Copy link
Member

GeoSot commented Jul 27, 2022

I am going to close this. Please, if you find a way to replicate, you may re-open the issue

@GeoSot GeoSot closed this as completed Jul 27, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants