* Fix bug #48073.

module/metric/js/preview.ui.js

@@ -91,7 +91,8 @@ window.handleFilterCheck = function()
 
 window.handleFilterToggle = function($el)
 {
-    $el.toggleClass('ring-primary');
+    toggleSearchBtn();
+
     $('.filter-panel').toggleClass('hidden');
 }
 
@@ -282,10 +283,11 @@ window.initFilterPanel = function()
 
     $('#mainMenu').after($('.filter-panel'));
 
-    $('.filter-btn').removeClass('ring-primary');
+    toggleSearchBtn(true);
     if(scope == 'filter')
     {
-        $('.filter-btn').addClass('ring-primary');
+        toggleSearchBtn(false);
+
         $('.filter-panel').removeClass('hidden');
         window.updateFilterCheck();
     }
@@ -705,7 +707,8 @@ window.genDataZoom = function(dataLength, initZoom = 10, axis = 'x')
 
 window.hideFilterPanel = function()
 {
-    $('.filter-btn').removeClass('ring-primary');
+    toggleSearchBtn(false);
+
     $('.filter-panel').addClass('hidden');
 }
 
@@ -715,3 +718,28 @@ window.deactiveNavMenu = function()
     $(itemSelector).removeClass('active');
     $(itemSelector).find('span.label').remove();
 }
+
+window.toggleSearchBtn = function(active = null)
+{
+    if(active === null)
+    {
+        $('.filter-btn').toggleClass('ring-primary');
+        $('.icon-search').toggleClass('text-primary');
+        $('.filter-btn-text').toggleClass('text-primary');
+    }
+    else
+    {
+        if(active)
+        {
+            $('.filter-btn').addClass('ring-primary');
+            $('.icon-search').addClass('text-primary');
+            $('.filter-btn-text').addClass('text-primary');
+        }
+        else
+        {
+            $('.filter-btn').removeClass('ring-primary');
+            $('.icon-search').removeClass('text-primary');
+            $('.filter-btn-text').removeClass('text-primary');
+        }
+    }
+}

module/metric/ui/component/filterpanel.html.php

@@ -45,11 +45,11 @@ $fnGenerateFilterContent = function($filterItems) use($lang, $fnGenerateFilterBl
         btn
         (
             setClass('search-form-toggle rounded-full gray-300-outline size-sm btn filter-btn'),
-            set::icon('search'),
+            icon('search'),
             bind::click('window.handleFilterToggle($element)'),
             span
             (
-                setClass('common'),
+                setClass('common filter-btn-text'),
                 $lang->metric->filter->common
             ),
             span