No Spotlight on moon.inputDecorator "SECOND TIME" while disabling pointermode in rendered

Question

I came across this problem while developing a sample application. The jsfiddle link which i am sharing have a basic functionality of opening a popup on button click. As rendered function is getting called only once while creation, thus disabling pointermode and spot works first time. But Why every time is it necessary for enyo to disable pointer mode and set spot to the component developer wants.

My requirement is that whenever popup opens a dialog, spotlight should be on the component i have specified. It could be the first component in popup or developer specified I might not be aware of other ways of doing / approaching the same, so please let me know.

Here is the jsfiddle link:

http://jsfiddle.net/pL1cawnw/1/

enyo.kind({
name:'app',
kind:'enyo.Control',
components:[
    {name:'popupBtn',kind:'moon.Button', content:'Open', ontap:'btnTapped'},
    {name:'popupBtn2',kind:'moon.Button', content:'Dummy'},
    {name:'inputPopUp', kind: 'inputPop'}
],
btnTapped:function(){
    this.$.inputPopUp.show();
},
rendered: function(){
    this.inherited(arguments);
    enyo.Spotlight.setPointerMode(false);
    enyo.Spotlight.spot(this.$.popupBtn);    
}
});
enyo.kind({
name:'inputPop',
kind:'enyo.Popup',
center:true,
scrim:true,
floating:true,
components:[
    {name:'inputDecorator', spotlight: true, kind:'moon.InputDecorator', style:'width:200px; height: 80px', components:[
        {kind:'moon.Input', name:'input', dismissOnEnter:true}
    ]} 
],
create:function(){
    this.inherited(arguments);
},
rendered: function(){
    this.inherited(arguments);
    enyo.Spotlight.setPointerMode(false);
    enyo.Spotlight.spot(this.$.inputDecorator);
}
});
new app().renderInto(document.body);

Apart from this way of doing initial focus, is there any other way of achieving the same?

Pre101 · Answer 1 · 2014-12-23T16:42:03.127

The reason you must disable pointer mode is that you cannot successfully spot something while the user is moving the pointer around as it would potentially lead to the spot jumping from the control being hovered to somewhere else and then back again. This will happen if you disable pointer mode.

You can call spot without setting pointer mode to false and the spotted control will be the focused control if the user switches back to 5-way (At least in the latest code).

Edit: I should add that when an moon.input has focus it won't show the spotlight highlight. You may need to set focus on the input if you want it to be 'typable' right away. Also, you should look at the source for moon.Popup as it does some special handling to prevent spotlight from leaking out of the popup.

No Spotlight on moon.inputDecorator "SECOND TIME" while disabling pointermode in rendered

1 Answers1