Menu item arrow key navigation breaks when first menu item is given disabled attribute

[mikedsharp]

What package has an issue

@mantine/core

Describe the bug

export default function App() {
  return (
    <MantineProvider withGlobalStyles withNormalizeCSS>
      <Menu>
        <Menu.Target>
          <Button>Toggle menu</Button>
        </Menu.Target>

        <Menu.Dropdown>
          <Menu.Item disabled icon={<IconSearch size={rem(14)} />}>
            Item 1
          </Menu.Item>

          <Menu.Item icon={<IconSearch size={rem(14)} />}>Item 2</Menu.Item>

          <Menu.Item icon={<IconSearch size={rem(14)} />}>Item 3</Menu.Item>
        </Menu.Dropdown>
      </Menu>
    </MantineProvider>
  );
}

If the first <Menu.Item> used in a <Menu> has the disabled attribute set, the keyboard interactions ArrowUp and ArrowDown are no longer functional, as in you can't move up and down the items in the menu with the arrow keys when the menu items are configured as above.

I have tested the <Menu.item> elements with a disabled attribute in different positions (at the top, at the bottom and in between other non-disabled <Menu.item> elements) and the ArrowUp and ArrowDown keyboard interactions all work predictably, letting you switch between menu items, except for when a disabled menu item is placed as the first element in the list, at the top of the menu.

The only workaround currently is to ensure that there's always an enabled menu item at the top of the list,

What version of @mantine/hooks page do you have in package.json?

5.10.4

If possible, please include a link to a codesandbox with the reproduced problem

https://codesandbox.io/embed/epic-shape-tdkr33?fontsize=14&hidenavigation=1&theme=dark

Do you know how to fix the issue

No

Possible fix

No response

[mikedsharp]

Has anyone ran into the same issue? it's easily reproducible with a barebones react project using mantine components.

[rtivital]

Fixed in 6.0.17