Can't hide modal before it is "shown?"

Nobody has claimed this yet.

In Bootstrap 5, calling Modal.hide() has no effect until modal is "shown" (it works as expected if the fade css class is removed).

Suppose you have list of items and a single modal. When you click on each item, details about that item are shown in the modal, but you accidentally clicked the wrong item, so you want to quickly cancel by clicking the backdrop while it's fading in. Currently you cannot do that. You have to wait until the wrong item is shown to you before you can close it.

Is there a way around this?

Maybe there should be an optional parameter, Modal.hide(force=true).

Without proposed fix: https://jsfiddle.net/o7wdt6r5/
With proposed fix: https://jsfiddle.net/fgyuerLo/

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Modal Test</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

	<style>
		.show {
			 transition: opacity 100ms;
		}
		.hide {
			 transition: opacity 10ms;
		}
	</style>

</head>
<body>

	<p>
		Click a button and quickly try to cancel the modal by clicking the backdrop.
	</p>

	<!-- Buttons -->
	<button type="button" class="btn btn-primary item-button" data-item-info="You clicked # 1">
		Item # 1
	</button>

	<button type="button" class="btn btn-primary item-button" data-item-info="You clicked # 2">
		Item # 2
	</button>

	<button type="button" class="btn btn-primary item-button" data-item-info="You clicked # 3">
		Item # 3
	</button>

	<!-- Modal -->
	<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-body">
					...
				</div>
			</div>
		</div>
	</div>

	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	<script>
		var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
			keyboard: false
		})

		$('.item-button').click(function(){
			$('#myModal').find('.modal-body').text($(this).data('item-info'))
			myModal.show();
		})

		$('.modal').click(function(e){
			if(!$(e.target).hasClass("modal-body")){
				console.log('Clicked modal backdrop, calling .hide()...')
				myModal.hide();
			}
		})

	</script>

</body>
</html>

Use the supplied HTML/JavaScript reproduction and compare it with the linked proposed fix. Trace the Modal.show() and hide() transition behavior, then verify that clicking the backdrop cancels the modal while it is fading in.

Written by the indexing model from the issue text.

Description

Contributor guide

First steps

Research direction

Assessment