2

I have a cascading knockout dropdown menu, when the first one is selected another select menu is created and added below it. This is done using a template bound to a list, the menus are added to this list and are bound to the DOM automatically. The problem is if the user is scrolling through the options like this:

enter image description here
and hits the "Next" (right arrow, which is intended to take you to the next input) it selects the option that is currently hovered (in this case June 18) and creates the new select but then instead of the navigating to the newly created select menu to it skips it and goes to the one after that (in my case way down the page). If you then hit "Previous" it brings you back to the newly created dropdown.

Is there a way to override that functionality so that it waits for the new dropdown to be created and navigate to it instead of skipping over it when Next is pressed?

EDIT: Also it should be noted that I did bind tab index to the menus, they are showing in the correct order, Tab index 1 then 2 then 3, so that is not the issue, it must be about the element not existing.

DasBeasto
  • 2,082
  • 5
  • 25
  • 65

1 Answers1

0

Unfortunately, no. SELECT menus are rendered by the operating system, and mobile safari takes full control of the SELECT. You cannot control what those buttons do.

However, instead of creating the cascasing dropdown after a selection is made, just populate it. Make sure that it always exists, but leave it empty until the previous dropdown has a selection. This will ensure that the next button takes you to the correct SELECT control.

Community
  • 1
  • 1
Kyeotic
  • 19,697
  • 10
  • 71
  • 128
  • This does work, however for now atleast I am trying to leave it with the dynamic creating of dropdowns because the amount of possible menus varies, so a static number of premade menus is not ideal. – DasBeasto Apr 20 '15 at 16:53
  • Then you're out of luck. There really is no way to do this. At least, not with a SELECT. You could create your own dropdown using HTML, but that road is fraught with difficulty. – Kyeotic Apr 20 '15 at 16:54
  • Yah I'm realizing there is no documented way of doing this. But for now Ive come up with a couple "not-elegant" solutions, such as adding an invisible input where the dropdowns are being created so that it gains the focus when "Next" is hit, and the programatically giving focus back to the new menu on creation, which happens so fast it appears as if it had focus all along. But Im hoping someone will have something a little better. – DasBeasto Apr 20 '15 at 16:59