Fixed - search icon click not working issue in admin ui grid sticky h…

…eader
magento · Apr 15, 2019 · 6cbf55d · 6cbf55d
1 parent 75cf826
commit 6cbf55d
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git a/app/code/Magento/Ui/view/base/web/js/grid/search/search.js b/app/code/Magento/Ui/view/base/web/js/grid/search/search.js
@@ -11,8 +11,9 @@ define([
     'uiLayout',
     'mage/translate',
     'mageUtils',
-    'uiElement'
-], function (_, layout, $t, utils, Element) {
+    'uiElement',
+    'jquery'
+], function (_, layout, $t, utils, Element, $) {
     'use strict';
 
     return Element.extend({
@@ -29,11 +30,13 @@ define([
             tracks: {
                 value: true,
                 previews: true,
-                inputValue: true
+                inputValue: true,
+                focused: true
             },
             imports: {
                 inputValue: 'value',
-                updatePreview: 'value'
+                updatePreview: 'value',
+                focused: false
             },
             exports: {
                 value: '${ $.provider }:params.search'
@@ -88,6 +91,18 @@ define([
             return this;
         },
 
+        /**
+         * Click To ScrollTop.
+         */
+        scrollTo: function ($data) {
+            $('html, body').animate({
+                scrollTop: 0
+            }, 'slow', function () {
+                $data.focused = false;
+                $data.focused = true;
+            });
+        },
+
         /**
          * Resets input value to the last applied state.
          *

diff --git a/app/code/Magento/Ui/view/base/web/templates/grid/search/search.html b/app/code/Magento/Ui/view/base/web/templates/grid/search/search.html
@@ -5,7 +5,7 @@
  */
 -->
 <div class="data-grid-search-control-wrap">
-    <label class="data-grid-search-label" attr="title: $t('Search'), for: index">
+    <label class="data-grid-search-label" attr="title: $t('Search'), for: index" data-bind="click: scrollTo">
         <span translate="'Search'"/>
     </label>
     <input class="admin__control-text data-grid-search-control" type="text"
@@ -16,6 +16,7 @@
                     placeholder: $t(placeholder)
                 },
                 textInput: inputValue,
+                hasFocus: focused,
                 keyboard: {
                     13: apply.bind($data, false),
                     27: cancel