No Spotlight on moon.inputDecorator “SECOND TIME” while disabling pointermode in rendered function

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?

Comments

  • I'm not sure I understand your question, but I see you're using enyo.Popup instead of moon.Popup. enyo.Popup is not Spotlight aware.
  • @Dragongears‌ Hi!.. I want to spotlight on moon.InputDecorator component every time popup opens. So to say, default focus when popup open is to be on InputDecorator. In the sample created, i am able to focus on InputDecorator, only one time when 'open' button is clicked. Requirement is whenever open button is clicked, leading to popup show call, and focus should be on the first component, i.e. in my case , it is moon.InputDecorator.
    As i want my popup to be in center of the screen, so i am using enyo.Popup with center set to true. I can see all moon.Popup comes from bottom, so doesn't fit my major requirement. Hope that helps to understand my question.
  • As you can see in your example, because enyo.Popup does not handle Spotlight it is possible to use Spotlight to highlight the buttons under the popup while the popup is showing. With moon.Popup the Spotlight behavior is more in line with what you expect. So, some suggestions are 1) Use moon.Popup and rework your requirements to be consistent with the Moonstone design. 2) Create your own sub-component from enyo.Popup and include code to handle Spotlight, similar to moon.Popup. or 3) Create a sub-component from moon.Popup that behaves the way you want it to. Maybe somebody else can chime in with more suggestions.
  • The rendered method is only called after a component is rendered.

    You could try overloading the show method, and move your spot commands there. Then it would fire everytime you call show() on the popup.
Sign In or Register to comment.