Wierd issue with setting focus

[Peter "Shawty" Shaw]

Hi,

I'm using Spatial Navigation for TV based applications, and so far it works perfectly. However I recently encountered a bug that's rather weird.

I've pinned it down to using ".focus" to focus an element.

First things first however: It's important to know this is an HbbTV/SmartTVA environment. The platform is "OperaTV" (Based on opera V31 with a chrome 44 core.) it's easy enough to replicate, by downloading the "Vewd TV emulator" (Which is where I first noticed it happening), this bug does NOT manifest itself in modern desktop browsers, including browsers using the HbbTV browser add-on to emulate a HbbTV device.

I'm afraid I can't take screen shots of the output, as the actual display output is on a device separate to the machine I code and am typing this on, I will describe it as best I can however.

---

I'm actually able to attach the full HTML app to this bug report, as it's all in one file
index.zip

Existentially the main HTML in the doc are these two lines:

<div id="appsBar" class=""></div>
<object id="video" type="" ></object>

The appsBar div element is filled with a series of inner divs, representing application icons that can be selected using up/down/enter, it's this navigation that the spatial library is used for.

when the div is populated, and "SpatialNavigation" has been set up, made focusable etc, the appsBar looks as follows

    <div id="appsBar" class="showBar">
        <div id="app0" class="appIcon focusable" data-url="http://www.bbc.co.uk/newsontal" data-name="BBC News" tabindex="-1"><span class="verticalCenterHelper"></span><img src="/images/logos/bbc-news.png"></div>
        <div id="app1" class="appIcon focusable" data-url="http://www.bbc.co.uk/sprtiptvjs" data-name="BBC Sports" tabindex="-1"><span class="verticalCenterHelper"></span><img src="/images/logos/bbc-sports.png"></div>
        <div id="app2" class="appIcon focusable" data-url="https://www.live.bbctvapps.co.uk/tap/iplayer" data-name="BBC iPlayer" tabindex="-1"><span class="verticalCenterHelper"></span><img src="/images/logos/bbc-iplayer.png"></div>
        <div id="app3" class="appIcon focusable" data-url="https://www.youtube.com/tv" data-name="YouTube" tabindex="-1"><span class="verticalCenterHelper"></span><img src="/images/logos/youtube.png"></div>
        <div id="app4" class="appIcon focusable" data-url="http://plex.tv/web/tv/opera?origin=TV%20Store%201" data-name="Plex" tabindex="-1"><span class="verticalCenterHelper"></span><img src="/images/logos/plex.png"></div>
        <div id="app5" class="appIcon focusable" data-url="http://192.168.17.214:8096/" data-name="Emby" tabindex="-1"><span class="verticalCenterHelper"></span><img src="/images/logos/emby.png"></div>
        <div id="app6" class="appIcon focusable" data-url="https://vestel.chili.tv" data-name="Chili TV" tabindex="-1"><span class="verticalCenterHelper"></span><img src="/images/logos/chili.png"></div>
        <div id="app7" class="appIcon focusable" data-url="http://nettv.cinetrailer.tv/foxxum-ant/region.asp" data-name="Cinetrailer" tabindex="-1"><span class="verticalCenterHelper"></span><img src="/images/logos/cinetrailer.png"></div>
        <div id="app8" class="appIcon focusable" data-url="https://vestel.tvstore.opera.com" data-name="Vewd" tabindex="-1"><span class="verticalCenterHelper"></span><img src="/images/logos/vewd.png"></div>
        <div id="app9" class="appIcon focusable" data-url="http://www.google.com" data-name="Google" tabindex="-1"><span class="verticalCenterHelper"></span><img src="/images/logos/google.png"></div>
        <div id="app10" class="appIcon focusable" data-url="browser://open" data-name="Browser" tabindex="-1"><span class="verticalCenterHelper"></span><img src="/images/logos/open-browser_v2.png"></div>
        <div id="app11" class="appIcon focusable" data-url="http://itv.mit-xperts.com/hbbtvtest/" data-name="HbbTVTest" tabindex="-1"><span class="verticalCenterHelper"></span><img src="/images/logos/default.png"></div>
        <div id="app12" class="appIcon focusable" data-url="http://immosmart.github.io/smartbox/demo/demoApp" data-name="ShawtyTest" tabindex="-1"><span class="verticalCenterHelper"></span><img src="/images/logos/default.png"></div>
    </div>

The CSS rule for the app bar places it off screen on the right hand side of the display, and pressing the red button add's a new part to the rule that slides the bar into view.

Initially I disable the spatial navigation on the appsBar and when it comes into view I enable it. Likewise when it disappears from view I disable the navigation on the appsBar once more, so that nothing can be triggered accidentally.

As you should be able to see in the attached file (at around line 210), when I open the bar I also set focus to the first element in the appsBar:

SpatialNavigation.focus("#app0", false);

When I do this, the other object on the page (An OIPF broadcast video object) flicks to the left hand side of the screen, then transitions back (It actually does a number of other things depending on where on the screen it is and what it's size is), as this element is NOT part of any navigation in the application, then this should not be moving or animating or anything like that.

The video object is fine and remains untouched if I take out the "focus" call, and I've also tried using 'true' in the silence parameter too, which makes no difference.

I need to always switch focus to the first item on my appsBar when it's opened, but I need to be able to do so without the video being moved.

The video object when fully initialized actually sits in the background and displays the broadcast video stream coming in from the devices reception, and so must remain still.

The appsBar is intended to slide in and out from the right allowing the TV user to select a different application to run.

[Peter "Shawty" Shaw]

Little bit of an update:

I actually think this may be a browser bug, as

document.getElementById("app0").focus();

has exactly the same effect.

[victortwc]

Hi @shawty, did you find any solution to that?

[Peter "Shawty" Shaw]

@victortwc Nope I'm afraid not, in fact I removed all the focus calls from my TV App, spatial navigation still works, but instead of using "focus" to select the element, I do it using standard CSS classes.

This is how my application looks right now, you can see which parts of the JS I've commented out, and as it stands this version works fine.

I've attached the file to this post.
index.html.gz

Shawty