Focus an input added dynamically on mobile safari

[Jeremy Kallman]

Here is my issue:

I have an array of inputs that are bound to a ng-model inside an ng-repeat. Works really well for desktop - you can see the control at www.pro.com.

But for mobile we start with just 1 input and have a button to add additional inputs as you go. So, in the click handler, I add one more item to the backing array and I get a new input and then I focus that new input in a $timeout as the input DOM element doesn't exist until the current digest is finished. And that works fine except on mobile safari as it won't let me focus an input unless the original click event is in the call stack (http://stackoverflow.com/questions/6287478/mobile-safari-autofocus-text-field/7332160#7332160).

So I am wondering if anyone has a workaround for this? One idea I just had was to add an additional hidden input so I can just unhide it and focus immediately. I think that will work but that is pretty hacky so ideally there would be some way for me to run additional code at the end of the digest cycle after the dom has been updated inside the original call stack??

Any help would be appreciated.

Thanks,

Jeremy

[Garry Taylor]

A solution is to re-work the layout. 

Have only one input box with an add button (nice tick or something). When the user types their request and hits the tick it is inserted into the list. This can then keep growing and the CreateMagicList controller should remain functional. It will therefore not require a focus apart from on the initial load.

I was thinking something like this: http://todo.breezejs.com/

Regards,

Garry Taylor