MAGETWO-53263: [Github] Issue with blank theme search input #4282

- Prevent default label click behavior when search field is active
magento · May 25, 2016 · 32a8550 · 32a8550
1 parent a5fa3af
commit 32a8550
Showing 1 changed file with 32 additions and 10 deletions.
diff --git a/app/code/Magento/Search/view/frontend/web/form-mini.js b/app/code/Magento/Search/view/frontend/web/form-mini.js
@@ -71,14 +71,18 @@ define([
                 }.bind(this)
             });
 
+            this.searchLabel.on('click', function (e) {
+                // allow input to lose its' focus when clicking on label
+                if (this.isExpandable && this.isActive()) {
+                    e.preventDefault();
+                }
+            }.bind(this));
+
             this.element.on('blur', $.proxy(function () {
 
                 setTimeout($.proxy(function () {
                     if (this.autoComplete.is(':hidden')) {
-                        this.searchLabel.removeClass('active');
-                        if (this.isExpandable === true) {
-                            this.element.attr('aria-expanded', 'false');
-                        }
+                        this.setActiveState(false);
                     }
                     this.autoComplete.hide();
                     this._updateAriaHasPopup(false);
@@ -87,12 +91,7 @@ define([
 
             this.element.trigger('blur');
 
-            this.element.on('focus', $.proxy(function () {
-                this.searchLabel.addClass('active');
-                if (this.isExpandable === true) {
-                    this.element.attr('aria-expanded', 'true');
-                }
-            }, this));
+            this.element.on('focus', this.setActiveState.bind(this, true));
             this.element.on('keydown', this._onKeyDown);
             this.element.on('input propertychange', this._onPropertyChange);
 
@@ -101,6 +100,29 @@ define([
                 this._updateAriaHasPopup(false);
             }, this));
         },
+
+        /**
+         * Checks if search field is active.
+         *
+         * @returns {Boolean}
+         */
+        isActive: function () {
+            return this.searchLabel.hasClass('active');
+        },
+
+        /**
+         * Sets state of the search field to provided value.
+         *
+         * @param {Boolean} isActive
+         */
+        setActiveState: function (isActive) {
+            this.searchLabel.toggleClass('active', isActive);
+
+            if (this.isExpandable) {
+                this.element.attr('aria-expanded', isActive);
+            }
+        },
+
         /**
          * @private
          * @return {Element} The first element in the suggestion list.