How to set an onyx.Input focused automatically when rendered inside an onyx.popup.

Hi, I have this little problem, I made a popup that diplays a calculator, everything works well except the fact that when the popup is shown I would like the focus on the Input so the user can type on it as soon as the calculator appears in case he doesn't want to use the virtual buttons. I tried setting the inputDecorator's alwaysLooksFocused to true, then I set the input's defaultFocus true, but nothing happened, in the first try it just made the input look focused as I knew later that was it's purpose (I know it was pretty obvious). So can anyone help me to do this?.

Comments

  • edited August 2014
    Hi there, can you do something like this to programmatically focus the input after the popup is shown? http://jsfiddle.net/aarontam/x9a8xk54/1/
  • edited August 2014
    Thanks for the quick answer! that works but the problem is that the popup doesn't really know that it has an input inside, actually it doesn't know there's a calculator. I had already thought about this solution but the thing is that I am using a function that creates an onyx popup, that popup has three parts, header, content and footer. The function receives as parametter whatever you want to place inside the content, so I placed the calculator, I am going to use this function all over the project I'm working so I shouldn't change it's structure just for this case so, is there any way to focus the input that doens't need to be done after calling the onShow handler? I am pretty new to enyo so I tried calling this focus function inside the input's create function without success.
  • While it's possible to do what you're trying to do, I would recommend creating kinds for each type of popup rather than injecting components at runtime. That would be the more "enyo way" of doing it and I think you'll find that easier to maintain and debug in the long run as well.

    Here's an adaptation of Aaron's code:

    http://jsfiddle.net/x9a8xk54/2/
  • edited August 2014
    Hey, in my context your example didn't work. Both the popup and the calculator are separated kinds and when I put the function showing
    changed, it is not called for some reason, I think because calculator does not extend onyx.Popup in my case. Even so I searched for a function that is called when a control is rendered and I found "rendered", this function is called but the focus() method isn't focusing anything but if I render only the calculator without any popup it does work, I've been thinking maybe a solution would be passing as parametter a callback that's received by the createpopup function then setting it as the onshow handler, this callback would call input.focus(). But I wanted to use that as a last choice. Any other idea? Thanks a lot for the help.
  • Could you create a jsfiddle that reproduces your scenario?
  • jsfiddle.net/pablo_limo/3cf3kprh/ here it is, I tried to simplify it as much as I could.
  • I've adapted your fiddle to the method I described above. Hope it helps!

    http://jsfiddle.net/3cf3kprh/1/
Sign In or Register to comment.