Navigation in p:menu using keyboard does not work when the menu is triggered by button #1936

Closed
I-Simen-I opened this Issue Nov 30, 2016 · 0 comments

Projects

None yet

2 participants

@I-Simen-I
I-Simen-I commented Nov 30, 2016 edited

1) Environment

  • PrimeFaces version: 5.3
  • Does it work on the newest PrimeFaces version?: No, tested on the demo site
  • Application server + version: WebLogic 12.2.1.0
  • Affected browsers: Chrome 54, Safari 10.0.1, IE 10/11

2) Expected behavior

Using p:menu with overlay="true" trigger="myButtonId" should give the same keyboard navigation support as when there are no overlay or trigger button. When you open the menu, you should be able to navigate with the key up and down
...

3) Actual behavior

Using p:menu with overlay="true" trigger="myButtonId". When the menu is triggered it is not possible to set focus in the menu and you can not use the keyboard to navigate through the menu items
..

4) Steps to reproduce

Go to: http://www.primefaces.org/showcase/ui/menu/menu.xhtml
Press tab until you hit the button "Show"
Press enter
Press key down
The keyboard navigation support does not work
Press tab again(trying to set the focus in the menu)
The focus is now at the next menu, not the menu you opened with the button "Show"
..

5) Sample XHTML

<h3>Overlay</h3> <p:commandButton id="dynaButton" value="Show" type="button" icon="ui-icon-extlink"/> <p:menu overlay="true" trigger="dynaButton" my="left top" at="left bottom"> <p:submenu label="Ajax"> <p:menuitem value="Save" actionListener="#{menuView.save}" update="messages" icon="ui-icon-disk"/> <p:menuitem value="Update" actionListener="#{menuView.update}" update="messages" icon="ui-icon-arrowrefresh-1-w"/> </p:submenu> <p:submenu label="Non-Ajax"> <p:menuitem value="Delete" actionListener="#{menuView.delete}" update="messages" ajax="false" icon="ui-icon-close"/> </p:submenu> <p:submenu label="Navigations"> <p:menuitem value="External" url="http://www.primefaces.org" icon="ui-icon-home"/> <p:menuitem value="Internal" outcome="/mobile/index" icon="ui-icon-star"/> </p:submenu> </p:menu>
..

6) Sample bean

See: http://www.primefaces.org/showcase/ui/menu/menu.xhtml and go down to MenuView.java
..

@mertsincan mertsincan added a commit that closed this issue Jan 23, 2017
@mertsincan mertsincan Fixed #1936 5fb9259
@mertsincan mertsincan added this to the 6.1 milestone Jan 23, 2017
@mertsincan mertsincan added the 6.0.15 label Jan 23, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment