Focus is lost after selecting option from "Select Menu" dropdown

[tellthemachines]

Description

In the Navigation Block toolbar, the "Select Menu" button opens a dropdown from where a different menu can be selected. Selecting a menu from that dropdown causes the dropdown to close, but when it closes keyboard focus is reset to the document body.

Focus should instead go back to the "Select Menu" button in the toolbar, or perhaps to the block itself.

Possibly due to #39044

Edit: Now it only happens when creating a new menu or importing from a classic one.

Step-by-step reproduction instructions

1. Create a Navigation block, and make sure the site has more than one navigation menu already.
2. In the Navigation block toolbar, click "Select Menu" and choose a menu from the dropdown.
3. Note focus is no longer on the block when the dropdown closes.

Screenshots, screen recording, code snippet

No response

Environment info

No response

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

[tellthemachines]

Looks like what's happening is the toolbar re-renders when the nav block contents are replaced, causing the button that focus should be returned to to disappear from the DOM.

[getdave]

FYI that this is being looked at in #38907 (comment).

We decided not to fix in that PR as this Issue is too complex.

[getdave]

Whoever works on a fix here should be sure to include an e2e test to ensure the Select menu... is not unmounted during loading.

[getdave]

I tested this by removing the RecursionProvider from the block. The focus loss issue still occurs. It's something else...

[alexstine]

This was a fairly complicated issue. I think this happens when the block changes in to loading state. I made a fix but it probably isn't pretty. Hopefully it may serve as a guide moving forward. I think this happens when the placeholder dynamically changes and focus is not forced. The block itself has some interesting focus issues even outside of this issue. 👎

[talldan]

I tested this by removing the RecursionProvider from the block. The focus loss issue still occurs. It's something else...

@getdave That's not a very scientific test, because there can be more than one cause of a bug. That's exactly the case in the navigation block, lots of DOM elements are unmounted/remounted, and that's one cause.

In a past attempt to solve this I removed as much code that causes unmounting/remounting as I could and the Recursion Provider was still an issue.

[getdave]

@getdave That's not a very scientific test, because there can be more than one cause of a bug.

I guess I didn't include my nuance here. What I meant to say was there doesn't appear to be a single cause here.

[draganescu]

I think #42987 solved this by incorporating #42956 but I am not confident enough to close the issue.

[cbravobernal]

Tested and is working fine!