Navigation block's "Open on click" mode bug on nested submenus

[daviedR]

Description

The "Open on click" mode in the Navigation block fails to keep the submenu when switching from an opened submenu to the other submenu.

Please watch the screen recording.

Step-by-step reproduction instructions

1. Edit (or create) a page.
2. Create a core/navigation block.
3. Enable this option: Setting (tab) > Display (panel) > Submenus > "Open on click".
4. Populate menu items as follows:

Top Level Menu Item
    1. Submenu item
        1.1. Nested Submenu Item
        1.2. Nested Submenu Item
    2. Submenu item
        2.1. Nested Submenu Item
        2.2. Nested Submenu Item

5. Save the page and view the page.
6. Click the Top Level Menu Item and then click the 1. Submenu Item, and then click the 2. Submenu Item.
7. The whole menu will be closed, which is not the expected behavior. The menu should still be opened with the 1. Submenu Item closed and 2. Submenu Item opened.

Screenshots, screen recording, code snippet

https://github.com/WordPress/gutenberg/assets/1287713/03d7f9da-2ad7-42f0-8290-d4139b07aadd

Environment info

• WordPress 6.5.2
• Theme: Twenty Twenty Fourteen
• Gutenberg 18.1.0 (bug also occurs without Gutenberg)

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

[github-actions[bot]]

Hi, This issue has gone 30 days without any activity. This means it is time for a check-in to make sure it is still relevant. If you are still experiencing this issue with the latest versions, you can help the project by responding to confirm the problem and by providing any updated reproduction steps. Thanks for helping out.

[torounit]

We were unable to reproduce this issue in WordPress 6.6.1 and Gutenberg 18.9.

Does this issue still occur? @daviedR

[daviedR]

Hi @torounit

Yes, it still occurs in WordPress 6.6.1 with and without Gutenberg 18.9 activated.

Please use this snippet and test:

<!-- wp:navigation {"openSubmenusOnClick":true} -->
    <!-- wp:navigation-submenu {"label":"Top Level Menu Item","url":"#","kind":"custom"} -->
        <!-- wp:navigation-submenu {"label":"1. Submenu Item","url":"#","kind":"custom"} -->
            <!-- wp:navigation-link {"label":"1.1. Nested Submenu Item","url":"#","kind":"custom"} /-->
            <!-- wp:navigation-link {"label":"1.2. Nested Submenu Item","url":"#","kind":"custom"} /-->
            <!-- wp:navigation-link {"label":"1.3. Nested Submenu Item","url":"#","kind":"custom"} /--> 
        <!-- /wp:navigation-submenu -->
        <!-- wp:navigation-submenu {"label":"2. Submenu Item","url":"#","kind":"custom"} -->
            <!-- wp:navigation-link {"label":"2.1. Nested Submenu Item","url":"#","kind":"custom"} /-->
            <!-- wp:navigation-link {"label":"2.2. Nested Submenu Item","url":"#","kind":"custom"} /-->
            <!-- wp:navigation-link {"label":"2.3. Nested Submenu Item","url":"#","kind":"custom"} /-->
        <!-- /wp:navigation-submenu -->
    <!-- /wp:navigation-submenu -->
<!-- /wp:navigation -->

The issue occurs when the "Open on click" mode is enabled. Please follow these steps to reproduce the issue:

1. Click the Top Level Menu Item.
2. Click the 1. Submenu Item, it opens the submenus panel of the 1st submenu.
3. Click the 2. Submenu Item, it doesn't open the submenus panel of the 2nd submenu. Instead, it will close the navigation.

I believe the expected behavior on the 3rd step should be: the 1. Submenu Item submenus panel disappeared, and the 2. Submenu Item submenus panel opened.

I tested on Chrome and Firefox browsers on Mac.

[torounit]

@daviedR Thank you. I was able to reproduce it.

And I was able to reproduce it with the following code.

<!-- wp:navigation-submenu {"label":"Sample Page","type":"page","id":2,"url":"http://localhost:8888/?page_id=2","kind":"post-type"} -->
<!-- wp:navigation-submenu {"label":"Sample Page","type":"page","id":2,"url":"http://localhost:8888/?page_id=2","kind":"post-type"} -->
<!-- wp:navigation-link {"label":"Sample Page","type":"page","id":2,"url":"http://localhost:8888/?page_id=2","kind":"post-type"} /-->

<!-- wp:navigation-link {"label":"Sample Page","type":"page","id":2,"url":"http://localhost:8888/?page_id=2","kind":"post-type"} /-->
<!-- /wp:navigation-submenu -->

<!-- wp:navigation-submenu {"label":"Sample Page","type":"page","id":2,"url":"http://localhost:8888/?page_id=2","kind":"post-type"} -->
<!-- wp:navigation-link {"label":"Sample Page","type":"page","id":2,"url":"http://localhost:8888/?page_id=2","kind":"post-type"} /-->

<!-- wp:navigation-link {"label":"Sample Page","type":"page","id":2,"url":"http://localhost:8888/?page_id=2","kind":"post-type"} /-->
<!-- /wp:navigation-submenu -->
<!-- /wp:navigation-submenu -->