Use submit instead of click in timepicker forms. Closes #306

elastic · Sep 22, 2014 · 5df689d · 5df689d
1 parent a801e3d
commit 5df689d
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 28 deletions.
diff --git a/src/kibana/components/timepicker/timepicker.html b/src/kibana/components/timepicker/timepicker.html
@@ -41,9 +41,12 @@
         </div>
         <div ng-switch-when="relative">
 
-          <div class="kbn-timepicker-section">
+          <form
+            ng-submit="applyRelative()"
+            class="form-inline"
+            name="relativeTime">
 
-            <form class="form-inline" role="form">
+            <div class="kbn-timepicker-section">
               <label>
                 From:
                 <span ng-show="relative.preview">{{relative.preview}}</span><span ng-hide="relative.preview"><i>Invalid Expression</i></span>
@@ -67,66 +70,71 @@
                   ng-checked="relative.round"
                   ng-change="formatRelative()"/> round to the {{units[relative.unit]}}
               </div>
-            </form>
 
-          </div>
+            </div>
 
-          <div class="kbn-timepicker-section">
-            <form class="form-inline" role="form">
+            <div class="kbn-timepicker-section">
               <label>
                 To: Now
               </label><br>
               <div class="form-group">
                 <input type="text" disabled class="form-control" value="Now">
               </div>
-            </form>
-          </div>
+            </div>
 
-          <div class="kbn-timepicker-section">
-            <form role="form">
-              <label>&nbsp</label>
+            <div class="kbn-timepicker-section">
+              <label>&nbsp</label><br>
               <div class="form-group">
-                <button class="btn btn-primary kbn-timepicker-go" ng-disabled="!relative.preview" ng-click="applyRelative()">Go</button>
+                <button
+                  type="submit"
+                  class="btn btn-primary kbn-timepicker-go"
+                  ng-disabled="!relative.preview">
+                  Go
+                </button>
               </div>
-            </form>
-          </div>
+            </div>
+          </form>
 
         </div>
 
         <div ng-switch-when="absolute">
-          <div class="kbn-timepicker-section">
-            <form role="form">
+
+          <form name="absoluteTime" ng-submit="applyAbsolute()">
+
+            <div class="kbn-timepicker-section">
               <div>
                 <label class="small">From: <span ng-show="!absolute.from"><i>Invalid Date</i></span></label>
                 <input type="text" required class="form-control" input-datetime="{{format}}" ng-model="absolute.from">
               </div>
               <div ng-model="absolute.from">
                 <datepicker max="absolute.to" show-weeks="false"></datepicker>
               </div>
-            </form>
-          </div>
+            </div>
 
-          <div class="kbn-timepicker-section">
-            <form role="form">
+            <div class="kbn-timepicker-section">
               <div>
                 <label class="small">To: <span ng-show="!absolute.to"><i>Invalid Date</i></span></label>
                 <input type="text" required class="form-control" input-datetime="{{format}}" ng-model="absolute.to">
               </div>
               <div ng-model="absolute.to">
                 <datepicker min="absolute.from" show-weeks="false"></datepicker>
               </div>
-            </form>
-          </div>
+            </div>
 
-          <div class="kbn-timepicker-section kbn-timepicker-alert">
-            <form role="form">
+            <div class="kbn-timepicker-section kbn-timepicker-alert">
               <label>&nbsp</label>
               <div class="form-group">
-                <button class="btn btn-primary kbn-timepicker-go" ng-disabled="absolute.from > absolute.to || !absolute.from || !absolute.to" ng-click="applyAbsolute()">Go</button>
+                <button
+                  class="btn btn-primary kbn-timepicker-go"
+                  ng-disabled="absolute.from > absolute.to || !absolute.from || !absolute.to"
+                  type="submit">
+                  Go
+                </button>
                 <span class="small" ng-show="absolute.from > absolute.to"><strong>From</strong> must occur before <strong>To</strong></span>
               </div>
-            </form>
-          </div>
+            </div>
+          </form>
+
 
         </div>
       </div>

diff --git a/test/unit/specs/directives/timepicker.js b/test/unit/specs/directives/timepicker.js
@@ -3,7 +3,7 @@ define(function (require) {
   var moment = require('moment');
   var _ = require('lodash');
   var $ = require('jquery');
-  var sinon = require('sinon/sinon');
+  var sinon = require('test_utils/auto_release_sinon');
 
 
   // Load the kibana app dependencies.
@@ -123,6 +123,27 @@ define(function (require) {
         done();
       });
 
+      it('has a submit handler', function (done) {
+        var form = $elem.find('form[ng-submit="applyRelative()"]');
+        expect(form.length).to.be(1);
+        done();
+      });
+
+      it('disables the submit button if the form is invalid', function (done) {
+        var button;
+        button = $elem.find('button[disabled]');
+        expect(button.length).to.be(0);
+
+        // Make the form invalid
+        $scope.relative.count = 'foo';
+        $scope.formatRelative();
+        $scope.$digest();
+
+        button = $elem.find('button[disabled]');
+        expect(button.length).to.be(1);
+        done();
+      });
+
       it('has a dropdown bound to relative.unit that contains all of the intervals', function (done) {
         var select = $elem.find('.kbn-timepicker-section select[ng-model="relative.unit"]');
         expect(select.length).to.be(1);