Better focus delay for modals

Author: mlynch

dist/css/ionic.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /*!
  * Copyright 2014 Drifty Co.
  * http://drifty.com/

dist/css/ionic.min.css

@@ -4951,19 +4951,25 @@ ionic.views.Scroll = ionic.views.View.inherit({
     initialize: function(opts) {
       opts = ionic.extend({
         focusFirstInput: false,
-        unfocusOnHide: true
+        unfocusOnHide: true,
+        focusFirstDelay: 600
       }, opts);
 
       ionic.extend(this, opts);
 
       this.el = opts.el;
     },
     show: function() {
+      var self = this;
+
       this.el.classList.add('active');
 
       if(this.focusFirstInput) {
-        var input = this.el.querySelector('input, textarea');
-        input && input.focus && input.focus();
+        // Let any animations run first
+        window.setTimeout(function() {
+          var input = self.el.querySelector('input, textarea');
+          input && input.focus && input.focus();
+        }, this.focusFirstDelay);
       }
     },
     hide: function() {
@@ -4972,9 +4978,12 @@ ionic.views.Scroll = ionic.views.View.inherit({
       // Unfocus all elements
       if(this.unfocusOnHide) {
         var inputs = this.el.querySelectorAll('input, textarea');
-        for(var i = 0; i < inputs.length; i++) {
-          inputs[i].blur && inputs[i].blur();
-        }
+        // Let any animations run first
+        window.setTimeout(function() {
+          for(var i = 0; i < inputs.length; i++) {
+            inputs[i].blur && inputs[i].blur();
+          }
+        });
       }
     }
   });

dist/js/ionic-angular.min.js

@@ -81,7 +81,8 @@ <h1 class="title">New Contact</h1>
         $ionicModal.fromTemplateUrl('modal.html', function(modal) {
           $scope.modal = modal;
         }, {
-          animation: 'slide-in-up'
+          animation: 'slide-in-up',
+          focusFirstInput: true
         });
 
       })

dist/js/ionic.js

@@ -5,19 +5,25 @@
     initialize: function(opts) {
       opts = ionic.extend({
         focusFirstInput: false,
-        unfocusOnHide: true
+        unfocusOnHide: true,
+        focusFirstDelay: 600
       }, opts);
 
       ionic.extend(this, opts);
 
       this.el = opts.el;
     },
     show: function() {
+      var self = this;
+
       this.el.classList.add('active');
 
       if(this.focusFirstInput) {
-        var input = this.el.querySelector('input, textarea');
-        input && input.focus && input.focus();
+        // Let any animations run first
+        window.setTimeout(function() {
+          var input = self.el.querySelector('input, textarea');
+          input && input.focus && input.focus();
+        }, this.focusFirstDelay);
       }
     },
     hide: function() {
@@ -26,9 +32,12 @@
       // Unfocus all elements
       if(this.unfocusOnHide) {
         var inputs = this.el.querySelectorAll('input, textarea');
-        for(var i = 0; i < inputs.length; i++) {
-          inputs[i].blur && inputs[i].blur();
-        }
+        // Let any animations run first
+        window.setTimeout(function() {
+          for(var i = 0; i < inputs.length; i++) {
+            inputs[i].blur && inputs[i].blur();
+          }
+        });
       }
     }
   });