Error on multiple clicks in the navigation modal when having a cover block after this

[renatho]

Description

It's a follow-up issue from #65626, where @aaronrobertshaw noticed some other related issues.

If we have a navigation block and some cover blocks after this, we can select the cover blocks with the navigation modal open on small screens by clicking multiple times in the blank area.

Step-by-step reproduction instructions

1. Create a page and include the following blocks:

See blocks to test

<!-- wp:navigation {"ref":4} /-->

<!-- wp:cover {"url":"http://wp-build.test/wp-content/uploads/2024/10/1067-3931-CoreyArnold-UnitedStates-Professional-WildlifeNature-2023.jpg","id":13,"dimRatio":50,"customOverlayColor":"#8f897e","isUserOverlayColor":false,"minHeight":240,"minHeightUnit":"px","isDark":false,"layout":{"type":"constrained"}} -->
<div class="wp-block-cover is-light" style="min-height:240px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim" style="background-color:#8f897e"></span><img class="wp-block-cover__image-background wp-image-13" alt="" src="http://wp-build.test/wp-content/uploads/2024/10/1067-3931-CoreyArnold-UnitedStates-Professional-WildlifeNature-2023.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">Cover Block</p>
<!-- /wp:paragraph -->

<!-- wp:navigation {"ref":4} /-->

<!-- wp:cover {"dimRatio":90,"overlayColor":"accent-4","isUserOverlayColor":true,"minHeight":240,"minHeightUnit":"px","layout":{"type":"constrained"}} -->
<div class="wp-block-cover" style="min-height:240px"><span aria-hidden="true" class="wp-block-cover__background has-accent-4-background-color has-background-dim-90 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">Nested Cover Block</p>
<!-- /wp:paragraph -->

<!-- wp:navigation {"ref":4} /--></div></div>
<!-- /wp:cover --></div></div>
<!-- /wp:cover -->

<!-- wp:cover {"url":"http://wp-build.test/wp-content/uploads/2024/10/file_example_MP4_480_1_5MG.mp4","id":16,"dimRatio":90,"overlayColor":"accent-6","isUserOverlayColor":true,"backgroundType":"video","minHeight":240,"minHeightUnit":"px","layout":{"type":"constrained"}} -->
<div class="wp-block-cover" style="min-height:240px"><span aria-hidden="true" class="wp-block-cover__background has-accent-6-background-color has-background-dim-90 has-background-dim"></span><video class="wp-block-cover__video-background intrinsic-ignore" autoplay muted loop playsinline src="http://wp-build.test/wp-content/uploads/2024/10/file_example_MP4_480_1_5MG.mp4" data-object-fit="cover"></video><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">Cover Block</p>
<!-- /wp:paragraph -->

<!-- wp:navigation {"ref":4} /-->

<!-- wp:cover {"url":"http://wp-build.test/wp-content/uploads/2024/10/1067-3931-CoreyArnold-UnitedStates-Professional-WildlifeNature-2023.jpg","id":13,"dimRatio":50,"customOverlayColor":"#8f897e","isUserOverlayColor":false,"minHeight":240,"minHeightUnit":"px","isDark":false,"layout":{"type":"constrained"}} -->
<div class="wp-block-cover is-light" style="min-height:240px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim" style="background-color:#8f897e"></span><img class="wp-block-cover__image-background wp-image-13" alt="" src="http://wp-build.test/wp-content/uploads/2024/10/1067-3931-CoreyArnold-UnitedStates-Professional-WildlifeNature-2023.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">Nested Cover Block</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div></div>
<!-- /wp:cover -->

<!-- wp:navigation {"ref":4} /-->

<!-- wp:cover {"url":"http://wp-build.test/wp-content/uploads/2024/10/1067-3931-CoreyArnold-UnitedStates-Professional-WildlifeNature-2023.jpg","id":13,"dimRatio":50,"customOverlayColor":"#8f897e","isUserOverlayColor":false,"minHeight":240,"minHeightUnit":"px","isDark":false,"layout":{"type":"constrained"}} -->
<div class="wp-block-cover is-light" style="min-height:240px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim" style="background-color:#8f897e"></span><img class="wp-block-cover__image-background wp-image-13" alt="" src="http://wp-build.test/wp-content/uploads/2024/10/1067-3931-CoreyArnold-UnitedStates-Professional-WildlifeNature-2023.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">Cover Block</p>
<!-- /wp:paragraph -->

<!-- wp:navigation {"ref":4} /--></div></div>
<!-- /wp:cover -->

<!-- wp:cover {"dimRatio":80,"overlayColor":"accent-3","isUserOverlayColor":true,"minHeight":240,"minHeightUnit":"px","layout":{"type":"constrained"}} -->
<div class="wp-block-cover" style="min-height:240px"><span aria-hidden="true" class="wp-block-cover__background has-accent-3-background-color has-background-dim-80 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">Cover Block</p>
<!-- /wp:paragraph -->

<!-- wp:navigation {"ref":4} /--></div></div>
<!-- /wp:cover -->

<!-- wp:cover {"url":"http://wp-build.test/wp-content/uploads/2024/10/file_example_MP4_480_1_5MG.mp4","id":16,"dimRatio":50,"customOverlayColor":"#FFF","isUserOverlayColor":false,"backgroundType":"video","minHeight":240,"minHeightUnit":"px","isDark":false,"layout":{"type":"constrained"}} -->
<div class="wp-block-cover is-light" style="min-height:240px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim" style="background-color:#FFF"></span><video class="wp-block-cover__video-background intrinsic-ignore" autoplay muted loop playsinline src="http://wp-build.test/wp-content/uploads/2024/10/file_example_MP4_480_1_5MG.mp4" data-object-fit="cover"></video><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">Cover Block</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

<!-- wp:navigation {"ref":4} /-->

2. Add some navigation items to the navigations.
3. Resize the window to a small size.
4. Open the navigation.
5. Click multiple times quickly where the cover blocks are behind the modal.
6. See that the cover block is selected.
7. Scroll the page, and check that it's scrolling behind the modal.

Screenshots, screen recording, code snippet

In the following video you will see that single click doesn't trigger the behavior. But if we click multiple times quickly (like a double-click), yes. And (only) when the issue happens we can also scroll behind the modal.

Screen.Recording.2024-10-09.at.11.30.26.1.mp4

Environment info

Issue reproduced with:

• WordPress 6.6, Gutenberg 19.3.0-rc.2, TT4, Chrome on OSX.

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

[renatho]

The original solution for the z-index issue is being changed here and here, but the issue reported here continues the same.