angular-xeditable Control does not receive focus when shown in Safari for iOS

In order to reproduce the issue, please navigate to http://vitalets.github.io/angular-xeditable/#text-simple and click on "awesome user" label in the demo section.

When using non-iOS device the text box shown after the click is automatically focused and a user is able to start editing the text immediately.

In Mobile Safari (we tested it on iOS 6), the text box does not receive focus, and user has to tap on the just appeared editor control in order for the virtual keyboard to show up, so that the text could be edited.

Our initial research of the problem pointed to the restriction in the Mobile Safari, which prohibits focusing an element in any event handler, except the one that is generated directly by the user. (Please refer to the accepted answer here http://stackoverflow.com/questions/6287478/mobile-safari-autofocus-text-field for more details).

That means that the .focus() call will not work in setTimeout() callback, which seems to be the way it's currently called in the control (https://github.com/vitalets/angular-xeditable/blob/master/src/js/editable-element/controller.js#L373). It appears, that setTimeout() usage is necessary for the angular bindings to be proprely handled, though.

Is there any way to fix the controls to allow an editor be autofocused when it's shown when running in Mobile Safari for iOS?

Thanks in advance.

Jan 20 '14 13:01 mbaranov

hi, thanks for reporting. I'll try to investigate into this issue..

Jan 23 '14 08:01 vitalets

Yes, this is a huge problem for me right now.

Apr 24 '14 09:04 kopch

+1 Any updates for this one? @vitalets can you explain the reason for the setTimeout(...,0) to me. I've currently commented this line and experienced no issues so far (+ iOS focus working)