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.
I am having this exact issue, which is causing our app to be rejected since the keyboard wasn’t reacting the way that it should.
One of the tests which failed was that the virtual keyboard left/right arrow buttons wasn’t moving the caret in the text field.
Eventually, I discovered that while employing SpatialNavigation.js on a search form, when the text input is ‘escaped’, an ArrowDown event is continuously fired until something else is manually focussed. Also the left/right arrow don’t work at all.
After removing SN.js from the page, I found that things started to work properly. However, I do need SN.js to work, to be able to navigate the form and any results from the search.
I have tried pausing SN.js at the onfocus event of the text input, then resuming it onblur. Sadly this hasn’t worked either.
So, I think my only choice now (unless anyone has anyone has any ideas) is to write something to effectively do what SN.js, just for this form. Using SpatialNavigation.js is absolutely the cause of the issue.