js-spatial-navigation
js-spatial-navigation copied to clipboard
WebOS TV with 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.
I'm facing a very similar issue.
As you say: "The focus is not truly shifted away from the [Select] input element" - in my case, it's a text input.
When the focus leaves the text input, I can see an ArrowDown (keyCode 40) being constantly fired, even though I'm not touching anything. This causes very bad things to happen. Until I can manually focus on something else. But this becomes impossible with the remote control (simulator).
This is issue to also causing the arrow left/right keys of a virtual keyboard on webOS to not work, meaning the app will be rejected. I have a strong feeling that the same issue will be present on Tizen.
Also looking for any ideas. I tried using the .pause()
and .resume()
methods at the input onfocus and onblur, but did not help.