Focus starts with the last selected submenu item when navigating menu items with arrow keys

[mukherjeesudebi]

Description

When navigating menu items with arrow keys, closing the sub menu, and reopening it, the focus starts with the last selected submenu item instead of the first in the submenu list of the menu item in the menu bar.

Expected outcome

The focus should always start from the first item of the submenu items list no matter what was last focussed before closing the sub menu

Minimal reproducible example

The behaviour can be tested in the documentation page itself https://vaadin.com/docs/latest/example?embed=menu-bar-right-aligned-wc.js&import=component/menubar/menu-bar-right-aligned.ts.

Steps to reproduce

If we focus on 'Get Link ' then close the sub menu with left or right arrow and again go to 'share' then press down arrow the focus is on the 'Get link'.

The issue could be reproduced in Vaadin versions 24, 23, 14

Environment

Vaadin version(s): 14. 23, 24

Browsers

No response

[web-padawan]

Confirmed and reproduced with the web component using item.component, here's the example:

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

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

  const createComponent = (text) => {
    const item = document.createElement('vaadin-menu-bar-item');
    item.textContent = text;
    return item;
  }

  const menuBar = document.querySelector('vaadin-menu-bar');
  menuBar.items = [
    { text: 'View', tooltip: 'Options for how to view the content' },
    { text: 'Edit' },
    {
      text: 'Share',
      children: [
        { component: createComponent('By email') },
        { component: createComponent('Get link') },
      ],
    },
  ];
</script>

When using item.text, sub-menu items are re-rendered on re-opening and tabindex attribute is set by ListMixin so that the first item is focusable. This doesn't happen with item.component as existing DOM elements are re-used.

IMO the list-box should explicitly update tabindex on re-opening in all cases for consistency. I'll work on the fix.