javascriptjqueryjquery-uijquery-ui-menujquery-ui-menubar

Jquery ui menubar with bug in core - arrow keys broken


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.


Solution

  • 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.