Spatial Nav and HTML Select boxes?

I’ve been at this for a few days now! What’s the trick to get Spatial_Navigation working with Select Box elements properly on web forms.

I resorted to wrapping form elements inside of [div class=“focusable”] when the use hits the OK button on the Simulator RC (Remote Control) the focus shifts to the child element (input, select) inside it. This works like a charm.

I have the focus returning to the parent [div class=“focusable”] tag upon the user hitting “OK” button again. This works like a charm for [input] tags like a charm.

For children which are a html [select] element. I keep track of the number of times “OK” has been pressed. When the count reaches 2, I have the focus returning back to the parent [div class=“focusable”] tag.

This works like a charm in a normal web browser, when I use the “Enter” key. This fails to function in the simulators using the “OK” button. While the focus does get set to the parent [div class=“focusable”], The focus is not truly shifted away from the [Select] input element. It even allows me to continue to scroll up/down with the up/down arrow keys. Even though the focus is on the parent [div class=“focusable”]. This behavior only is happening in the simulators and not when testing via normal web browser.

I am working with SpatialNavigation.pause(); and SpatialNavigation.resume(); to make certain that SpatialNavigation is not interfering with anything.

Any help advice or suggestions welcomed right now.

Sorry for the late reply. The simulator is not exactly the same as the TV. In the simulator, the mouse cursor replaces the pointer of the Magic Remote. So if you click the arrow keys on the RCU of the simulator using the mouse, it is like the pointer goes off the screen. This seems to make a difference. The keycodes for Enter and OK are the same. So the inputs are the same. They will work the same way in the TV. Thank you.