0

I'm trying to set up some proper object tree that resembles a dropdown menu.

I managed to set up an object tree that resembles a dropdown menu. But now I'm struggling with manually setting focus to a sub menu. I know that I am on the correct item, but executing focus() on it doesn't seem to have the expected effect. I have prepared a codepen which illustrates the problem:

http://codepen.io/jmuheim/pen/fAjcx

In the output window, press tab until you're on "Programming languages". Then press enter to open the submenu. Now if you press "down", I'd expect the first item "Ruby" to gain focus. But it doesn't. Take a look at the handleDown function in RootParentItem class to see the corresponding code.

Joshua Muheim
  • 12,617
  • 9
  • 76
  • 152

1 Answers1

1

If you change the behaviour of the handleDown to focus on the a element, or add a tabindex property on the li then the focus will work as you can only focus on elements with a tabindex except for forms anchors and iframes.

ipopa
  • 1,223
  • 11
  • 12
  • The thing is, that I don't want to navigate within the submenus with the tab key. So should I add e `attr('tabindex', '0')` to the `li` manually before focusing it? Or shouldn't I work with focus anyway? Or should I preventDefault for the tab key and set it manually, too? – Joshua Muheim Aug 08 '14 at 12:23
  • I stripped out some unnecessary info from my question so I could mark your answer as correct. Thank you. – Joshua Muheim Aug 09 '14 at 06:47
  • I created a new question with the things I cut out from this question: http://stackoverflow.com/questions/25216020/oop-with-jquery-objects-changing-prototype-of-jquery-arrays-vs-creating-my-own – Joshua Muheim Aug 09 '14 at 06:51