locked
Setting the Initial Focus on a Flyout in JavaScript

    General discussion

  • 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

    Saturday, April 14, 2012 10:58 PM

All replies

  • 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);      
        }

    Sunday, April 15, 2012 12:34 PM
  • Many thanks

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

    Monday, April 16, 2012 8:05 AM