Merge pull request #15607 from KevinGrandon/bug_961351_to_master

Bug 961351 - Clear button not visible when focusing on rocketbar

apps/system/js/rocketbar.js

@@ -57,11 +57,7 @@ var Rocketbar = {
     var input = document.getElementById('search-input');
     var self = this;
     input.addEventListener('input', function onInput(e) {
-      if (!input.value) {
-        self.searchReset.classList.add('hidden');
-      } else {
-        self.searchReset.classList.remove('hidden');
-      }
+      self.updateResetButton();
 
       // If the task manager is shown, hide it
       if (this.screen.classList.contains('task-manager')) {
@@ -141,6 +137,8 @@ var Rocketbar = {
         if (UrlHelper.isNotURL(this.searchInput.value)) {
           this.searchInput.value = '';
         }
+
+        this.updateResetButton();
         break;
       default:
         break;
@@ -186,6 +184,17 @@ var Rocketbar = {
     }.bind(this));
   },
 
+  /**
+   * Displays or hides the reset button as necessary
+   */
+  updateResetButton: function() {
+    if (!this.searchInput.value) {
+      this.searchReset.classList.add('hidden');
+    } else {
+      this.searchReset.classList.remove('hidden');
+    }
+  },
+
   /**
    * Inserts the search app iframe into the dom.
    */

apps/system/test/unit/rocketbar_test.js

@@ -67,6 +67,17 @@ suite('system/Rocketbar', function() {
       });
       assert.ok(!Rocketbar.screen.classList.contains('rocketbar-focus'));
     });
+
+    test('input on event call updateResetButton', function() {
+      var stub = this.sinon.stub(Rocketbar, 'updateResetButton');
+
+      var evt = document.createEvent('CustomEvent');
+      evt.initEvent('input', true, true);
+      Rocketbar.searchInput.dispatchEvent(evt);
+
+      assert.ok(stub.calledOnce);
+      stub.restore();
+    });
   });
 
   suite('handleEvent', function() {
@@ -131,6 +142,20 @@ suite('system/Rocketbar', function() {
 
       assert.equal(dispatchStub.getCall(0).args[0].type, 'taskmanagershow');
     });
+
+    test('focus on event call updateResetButton', function() {
+      var stub = this.sinon.stub(Rocketbar, 'updateResetButton');
+
+      Rocketbar.handleEvent({
+        type: 'focus',
+        target: {
+          id: 'search-input'
+        }
+      });
+
+      assert.ok(stub.calledOnce);
+      stub.restore();
+    });
   });
 
   suite('render', function() {