Set focus on default element on page render

Ho do I set focus to an element (button etc) after render ?

I've tried nameOfElement.focus() and that does not seem to work.

Comments

  • I need to focus on a moonstone button.

    I tried this and it does not work:
    enyo.create({
        components: [
            {name: "testInput", kind:"moon.Button", 
            content : "button to focus on",spotlight:true}
        ],
        rendered: function(){
            this.inherited(arguments);
            this.$.testInput.focus();
        }
    
    }).renderInto(document.body);
  • Hi there, you do not need to specify spotlight:true for a moon.Button as it is already Spotlight-enabled. Programmatically forcing a Spotlight focus of a Moonstone element can be tricky as the general rule is that when in pointer mode, only items hovered by the pointer should be focused, otherwise you end up with the scenario where you have two disparate controls on the screen with Spotlight focus. You can, at times, get around this by disabling pointer mode, but this should force you to pause and reconsider why you are programmatically spotting in the first place. Here is an example that should accomplish what you want: http://jsfiddle.net/aarontam/uam83z55/5/

    Alternatively, you could add the "spotlight" class to your button as so, though the ball would then be in your court to manage removal of the class as appropriate: http://jsfiddle.net/aarontam/uam83z55/6/
  • @aarontam Thank you this helps quite a bit.
Sign In or Register to comment.