[menu-bar] Submenu not closed on menu-bar button blur with Tab / Shift Tab

[web-padawan]

Description

Finding from #8912

When moving focus outside of the menu bar using Tab or Shift + Tab, the submenu is not closed if the focus was on the vaadin-menu-bar-button (not on the submenu item).

Note: the issue is not specific to Tab navigation mode, can be reproduced with or without it.

menu-bar-tab.mp4

Expected outcome

Expected the submenu to close.

Minimal reproducible example

<input>
<vaadin-menu-bar></vaadin-menu-bar>
<input>

<script type="module">
  import '@vaadin/menu-bar';

  const menuBar = document.querySelector('vaadin-menu-bar');
  menuBar.items = [
    {
      text: 'Share',
      children: [
        {
          text: 'On social media',
          children: [{ text: 'Facebook' }, { text: 'Twitter' }, { text: 'Instagram' }],
        },
        { text: 'By email' },
        { text: 'Get link' },
      ],
    },
    {
      text: 'Move',
      tooltip: 'Move to a different folder or trash.',
      children: [{ text: 'To folder' }, { text: 'To trash' }],
    },
  ];
</script>

Steps to reproduce

1. Focus the menu-bar
2. Open submenu for one item
3. Switch submenu to another item so that button is focused
4. Press Tab to leave menu-bar

Environment

Vaadin version(s): 24.8 (main) and earlier

Browsers

Issue is not browser related