Lose focuse while navigation with appbar commands

Question

 Hi 

we deal with a problem to have focus after returning back to home page via appbar commands,

we use this html code for the appbar

<div id="upperAppBar" data-win-control="WinJS.UI.AppBar"  data-win-options="{layout:'custom',placement:'top'}">
        <div class="appbar">
                <button id="cmdBack"  data-win-control="WinJS.UI.AppBarCommand" data-win-                                  
        </div>

We add a listner for the "cmdBack" button:

WinJS.Navigation.navigate(Application.navigator.home);

Its indeed return back to home page but in order to use it we need to click on some point in 

the screen.the intersteing issue is that the same code is working and focusing if the button

is not within the appbar.

its imoprtant to mention that document.body.focus() didn't help for us

Thanks 

Answer 1

Hi, TomerBanin,

Could you please give more details,

I understood that you are using the navigator.js, so, your app bar is placed in a "default.html' that load the other fragments, correct?

When you navigate home, the app bar is still in a "show" state?

When you say that you lose the focus, this mean that you have to click twice on the body area to do some actions over there?

Thanks

Answer 2

Hi 

thanks for your replay.

I understood that you are using the navigator.js, so, your app bar is placed in a "default.html' that load the other fragments, correct? 

yes exactly.

When you navigate home, the app bar is still in a "show" state?

i think not because its not showing on the screen,how can i determine if its still in show "state"?.

When you say that you lose the focus, this mean that you have to click twice on the body area to do some actions over there?

yes exactly.

i found some workaround yesterday but will be pleased to have an answer for this issue 

the soultion that i found is to add this css rule to default.css file

.win-appbarclickeater {

 display:none !important ;

}

i don't really know what this div css "class" responsabile of (searching the web for this css "class" lead to no result),but it solved the problem.

Thanks again

Answer 3

Hi, TomerBanin,

Problably you are working with "WinJS.UI.Pages.define", for each page. So, when you define the pages, you have the "ready" function, for example, that is called everytime your page is loaded. The same happen to the "unload" function, that is called when your page is about to be unloaded. In my opinion, is a good practice, when you are navigating between pages using appbar, to add a code like bellow:

unload: function () {
   var appbar = document.querySelector("#appbar").winControl;
   appbar.hide();
}

This way, you are saying to the appbar hide everytime you navigate a page to another.

Thanks

Answer 4

this work for me 

thanks