apply focus() asynchronously to prevent issues with element not being visible yet.

architecture-examples/knockoutjs/index.html

@@ -23,7 +23,7 @@
                     <a class="destroy" href="#" data-bind="click: $root.remove"></a>
                 </div>
                 <input class="edit" type="text"
-                       data-bind="value: content, valueUpdate: 'afterkeydown', enterKey: stopEditing, hasfocus: editing, select: true, event: { blur: stopEditing }"/>
+                       data-bind="value: content, valueUpdate: 'afterkeydown', enterKey: stopEditing, selectAndFocus: editing, event: { blur: stopEditing }"/>
             </li>
         </ul>
     </section>

architecture-examples/knockoutjs/js/app.js

@@ -28,14 +28,20 @@
         }
     };
 
-    //select text when element is focused
-    ko.bindingHandlers.select = {
-        init:function (element) {
-            var handler = function () {
+    //wrapper to hasfocus that also selects text and applies focus async
+    ko.bindingHandlers.selectAndFocus = {
+        init:function (element, valueAccessor, allBindingsAccessor) {
+            ko.bindingHandlers.hasfocus.init(element, valueAccessor, allBindingsAccessor);
+            ko.utils.registerEventHandler(element, "focus", function () {
                 element.select();
-            };
-
-            ko.utils.registerEventHandler(element, "focus", handler);
+            });
+        },
+        update:function (element, valueAccessor) {
+            ko.utils.unwrapObservable(valueAccessor()); //for dependency
+            //ensure that element is visible before trying to focus
+            setTimeout(function () {
+                ko.bindingHandlers.hasfocus.update(element, valueAccessor);
+            }, 0);
         }
     };