Setting the Initial Focus on a Flyout in JavaScript

Question

Hello there

I am unable to set the initial focus to a control within a flyout when the flyout is displayed.

I am developing a metro style app using JavaScript.

I am using code like:

txtName.focus()

where txtName is a reference to a text box within the flyout.

This does seem to set focus to the control momentarily, however something (presumably something in the library) then immediately removes the focus.

I have tried running the code asynchronously using a timer (with an interval of 1 millisecond) without success.

Many thanks

Geoff Olding

Answer 1

Here is a technique that seems to work for me. (Although it seems like a kludge.)

Hook up an aftershow event listener for the flyout.

document.getElementById("loginFlyout").addEventListener("aftershow", onShow, false);

In the event listener, use a timer to delay and set the focus on the text element.  I have found that even an interval of 0 works in my system!

function onShow() {
        setTimeout(function () {
            var text1 = document.getElementById("username");
            text1.focus();
        }, 0);      
    }

Answer 2

Many thanks

Works for me (I too had to make the call to set the focus on a timer of 1 millisecond to work).