From 787101708d7724fda07aa16ae677788cc2bed56c Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Sun, 10 Nov 2013 18:43:09 -0600
Subject: [PATCH] FIxed #109 - modal auto focus and unfocus on close

---
 dist/js/ionic-angular.js                 |  4 ++++
 dist/js/ionic.js                         | 17 +++++++++++++++++
 js/ext/angular/src/service/ionicModal.js |  4 ++++
 js/ext/angular/test/modal.html           |  1 +
 js/views/modalView.js                    | 17 +++++++++++++++++
 5 files changed, 43 insertions(+)

diff --git a/dist/js/ionic-angular.js b/dist/js/ionic-angular.js
index 52fb683a75..11199ec5a0 100644
--- a/dist/js/ionic-angular.js
+++ b/dist/js/ionic-angular.js
@@ -167,11 +167,15 @@ angular.module('ionic.service.modal', ['ionic.service.templateLoad'])
         $animate.enter(element, angular.element($document[0].body));
       } 
       $animate.addClass(element, this.animation);
+
+      ionic.views.Modal.prototype.show.call(this);
     },
     // Hide the modal
     hide: function() {
       var element = angular.element(this.el);
       $animate.removeClass(element, this.animation);
+
+      ionic.views.Modal.prototype.hide.call(this);
     },
 
     // Remove and destroy the modal scope
diff --git a/dist/js/ionic.js b/dist/js/ionic.js
index 158a1f0b44..dbd9894197 100644
--- a/dist/js/ionic.js
+++ b/dist/js/ionic.js
@@ -3318,13 +3318,30 @@ window.ionic = {
 
   ionic.views.Modal = ionic.views.View.inherit({
     initialize: function(opts) {
+      opts = ionic.extend({
+        focusFirstInput: true
+      }, opts);
+
+      ionic.extend(this, opts);
+
       this.el = opts.el;
     },
     show: function() {
       this.el.classList.add('active');
+
+      if(this.focusFirstInput) {
+        var input = this.el.querySelector('input, textarea');
+        input && input.focus && input.focus();
+      }
     },
     hide: function() {
       this.el.classList.remove('active');
+
+      // Unfocus all elements
+      var inputs = this.el.querySelectorAll('input, textarea');
+      for(var i = 0; i < inputs.length; i++) {
+        inputs[i].blur && inputs[i].blur();
+      }
     }
   });
 
diff --git a/js/ext/angular/src/service/ionicModal.js b/js/ext/angular/src/service/ionicModal.js
index 53aca520fd..2390fcdd46 100644
--- a/js/ext/angular/src/service/ionicModal.js
+++ b/js/ext/angular/src/service/ionicModal.js
@@ -14,11 +14,15 @@ angular.module('ionic.service.modal', ['ionic.service.templateLoad'])
         $animate.enter(element, angular.element($document[0].body));
       } 
       $animate.addClass(element, this.animation);
+
+      ionic.views.Modal.prototype.show.call(this);
     },
     // Hide the modal
     hide: function() {
       var element = angular.element(this.el);
       $animate.removeClass(element, this.animation);
+
+      ionic.views.Modal.prototype.hide.call(this);
     },
 
     // Remove and destroy the modal scope
diff --git a/js/ext/angular/test/modal.html b/js/ext/angular/test/modal.html
index 997a2a9dbe..a48cfbf7b9 100644
--- a/js/ext/angular/test/modal.html
+++ b/js/ext/angular/test/modal.html
@@ -25,6 +25,7 @@
         </header>
         <content>
           Realllllyyy long content
+          <input type="text">
           <div style="height: 2000px; background-color: red;"></div>
         </content>
       </div>
diff --git a/js/views/modalView.js b/js/views/modalView.js
index 38149ade07..a8b8e7cebe 100644
--- a/js/views/modalView.js
+++ b/js/views/modalView.js
@@ -3,13 +3,30 @@
 
   ionic.views.Modal = ionic.views.View.inherit({
     initialize: function(opts) {
+      opts = ionic.extend({
+        focusFirstInput: true
+      }, opts);
+
+      ionic.extend(this, opts);
+
       this.el = opts.el;
     },
     show: function() {
       this.el.classList.add('active');
+
+      if(this.focusFirstInput) {
+        var input = this.el.querySelector('input, textarea');
+        input && input.focus && input.focus();
+      }
     },
     hide: function() {
       this.el.classList.remove('active');
+
+      // Unfocus all elements
+      var inputs = this.el.querySelectorAll('input, textarea');
+      for(var i = 0; i < inputs.length; i++) {
+        inputs[i].blur && inputs[i].blur();
+      }
     }
   });