How to set Focus to tizen web app document object for eventListener? (Javascript)

Question

I am developing a Tizen Webapp for Watches with bezel input. To listen for the Bezel rotation event on the HTML document I used the following code:

rotaryDetentCallback = function rotaryDetentHandler(e) {
    var direction = e.detail.direction;
    if (direction === "CW") {
     alert("<-");
    } else if (direction === "CCW") {
     alert("->");
    }
}; 
document.addEventListener("rotarydetent", rotaryDetentCallback, false);
  console.log(document.hasFocus());//returns true

$('select').on('change', function(){
  console.log(document.hasFocus());  //Prints false
  document.activeElement.blur();     //doesnt work
  window.focus();                    //doesnt work
  document.focus();                  //retuns error
});

The rotarydetent listener works great but after I change any Select element in the App at runtime, the document loses focus and the event is not firing any more.

How can I get the focus back to document object after select change?

PS: the standard UI for Select Tag on Tizen wearable web-apps uses the bezel also, so I guess it takes the eventListener from document and doesn't give it back.

Answer 1

There is no such function document.focus() and window.focus() is for restoring the focus to the current window ( apparently if you have multiple ones open ) and not for bringing it back to the contents of the page.

Try to focus document.body or its focusable ancestor instead - the one being a form field , or a link or having an appropriate tabIndex attribute .