Merge pull request #2631 from robertknight/t90-search_icon_click

Fix an issue where clicking the search icon would submit the form

h/static/scripts/directive/simple-search.coffee

@@ -41,10 +41,10 @@ module.exports = ['$http', '$parse', ($http, $parse) ->
                      placeholder="{{loading && 'Loading' || 'Search'}}…"
                      ng-disabled="loading"
                      ng-class="(alwaysExpanded || searchtext.length > 0) ? 'is-expanded' : ''"/>
-              <button class="simple-search-icon top-bar__btn" ng-hide="loading">
+              <button type="button" class="simple-search-icon top-bar__btn" ng-hide="loading">
                 <i class="h-icon-search"></i>
               </button>
-              <button class="simple-search-icon btn btn-clean" ng-show="loading" disabled>
+              <button type="button" class="simple-search-icon btn btn-clean" ng-show="loading" disabled>
                 <span class="btn-icon"><span class="spinner"></span></span>
               </button>
             </form>

h/static/scripts/directive/test/simple-search-test.coffee

@@ -35,9 +35,17 @@ describe 'simple-search', ->
     '''
 
     $element = $compile(angular.element(template))($scope)
+
+    # add element to document so that it becomes focusable
+    # and we get default form behaviors
+    document.body.appendChild($element[0])
+
     $scope.$digest()
     isolate = $element.isolateScope()
 
+  afterEach ->
+    document.body.removeChild($element[0])
+
   it 'updates the search-bar', ->
     $scope.query = "Test query"
     $scope.$digest()
@@ -75,3 +83,26 @@ describe 'simple-search', ->
     fakeHttp.pendingRequests = ['bogus']
     isolate.$digest()
     assert.isTrue(isolate.loading)
+
+  it 'expands the search field when the input is non-empty', ->
+    input = $element.find('.simple-search-input')
+    assert.isFalse(input.hasClass('is-expanded'))
+    input.val('query')
+    input.trigger('change')
+    isolate.$digest()
+    assert.isTrue(input.hasClass('is-expanded'))
+
+  it 'focuses the search field when clicking the search button', ->
+    input = $element.find('.simple-search-input')
+    searchBtn = $element.find('button')
+    assert.ok(document.activeElement != input[0])
+    searchBtn.click()
+    assert.ok(document.activeElement == input[0])
+
+  it 'does not update the search when clicking the search button', ->
+    searchBtn = $element.find('button')
+    input = $element.find('.simple-search-input')
+    input.val('query')
+    input.trigger('change')
+    searchBtn.click()
+    assert.notCalled($scope.update)