Jquery ui menubar with bug in core - arrow keys broken

Question

I have this code:

    <ul id="bar1" class="menubar">
        <li>
            <a href="#"> label1</a>
            <ul>
                <li>
                    <a href="link1.1"> label1.1</a>
                    <ul>
                        <li>
                            <a href="link1.1.1"> label1.1.1</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="link1.2"> label1.2</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="link2"> label2</a>
            <ul>
                <li>
                    <a href="link2.1"> label2.1</a>
                </li>
                <li>
                    <a href="link2.2"> label2.2</a>
                </li>
            </ul>
        </li>
    </ul>

$(function () {
    $("#bar1").menubar();
});

To reproduce the bug (i am only interested about the action with arrow keys):

• Only use arrow keys
• Press tab
• Press right key
• Press down key
• Press left key

Demo 1

You will see the key response broken at this point.

---

If i change the order of menu all works well, so the problem is the submenu.

Demo 2

---

Also broken, if both buttons have submenus.

Demo 3

---

I seriously think it's a bug. If someone can fix should send to the authors, and merge with trunk.

Answer 1

This is definitely a bug in menu bar, probably a regression.

2011 version works perfectly

Copyright 2011

http://jsfiddle.net/cB2kX/4/

---

2013 has the bug.

Copyright 2013

http://jsfiddle.net/cB2kX/5/

The bug has reported, but apparently ignored by Jquery UI team. For me is solved using the version of 2011.