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);