From 51f94d861acefe46531a76ecea112dc072fe67b5 Mon Sep 17 00:00:00 2001
From: Melloware <mellowaredev@gmail.com>
Date: Fri, 19 Jan 2024 11:01:12 -0500
Subject: [PATCH] Fix #5802: ShowClearButton consistency (#5806)

---
 components/lib/datatable/ColumnFilter.js | 63 +++++++++++++-----------
 1 file changed, 33 insertions(+), 30 deletions(-)

diff --git a/components/lib/datatable/ColumnFilter.js b/components/lib/datatable/ColumnFilter.js
index da55f73e8e..46397be706 100644
--- a/components/lib/datatable/ColumnFilter.js
+++ b/components/lib/datatable/ColumnFilter.js
@@ -78,10 +78,6 @@ export const ColumnFilter = React.memo((props) => {
         return filterModel && filterModel.matchMode === matchMode;
     };
 
-    const showMenuButton = () => {
-        return getColumnProp('showFilterMenu') && (props.display === 'row' ? getColumnProp('dataType') !== 'boolean' : true);
-    };
-
     const matchModes = () => {
         return (
             getColumnProp('filterMatchModeOptions') ||
@@ -90,6 +86,14 @@ export const ColumnFilter = React.memo((props) => {
         );
     };
 
+    const isShowMenuButton = () => {
+        return getColumnProp('showFilterMenu') && (props.display === 'row' ? getColumnProp('dataType') !== 'boolean' : true);
+    };
+
+    const isShowClearButton = () => {
+        return getColumnProp('showClearButton') && props.display === 'row';
+    };
+
     const isShowMatchModes = () => {
         return getColumnProp('dataType') !== 'boolean' && getColumnProp('showFilterMatchModes') && matchModes() && getColumnProp('showFilterMenuOptions');
     };
@@ -523,7 +527,7 @@ export const ColumnFilter = React.memo((props) => {
     };
 
     const createMenuButton = () => {
-        if (!showMenuButton()) {
+        if (!isShowMenuButton()) {
             return null;
         }
 
@@ -563,6 +567,10 @@ export const ColumnFilter = React.memo((props) => {
     };
 
     const createClearButton = () => {
+        if (!isShowClearButton()) {
+            return null;
+        }
+
         const filterClearIconProps = mergeProps(
             {
                 'aria-hidden': true
@@ -571,32 +579,27 @@ export const ColumnFilter = React.memo((props) => {
         );
         const icon = props.filterClearIcon || <FilterSlashIcon {...filterClearIconProps} />;
         const filterClearIcon = IconUtils.getJSXIcon(icon, { ...filterClearIconProps }, { props });
+        const clearLabel = clearButtonLabel();
+        const headerFilterClearButtonProps = mergeProps(
+            {
+                className: cx('headerFilterClearButton', { hasRowFilter }),
+                type: 'button',
+                onClick: (e) => clearFilter(e),
+                'aria-label': clearLabel
+            },
+            getColumnPTOptions('headerFilterClearButton', {
+                context: {
+                    hidden: hasRowFilter()
+                }
+            })
+        );
 
-        if (getColumnProp('showClearButton') && props.display === 'row') {
-            const clearLabel = clearButtonLabel();
-            const headerFilterClearButtonProps = mergeProps(
-                {
-                    className: cx('headerFilterClearButton', { hasRowFilter }),
-                    type: 'button',
-                    onClick: (e) => clearFilter(e),
-                    'aria-label': clearLabel
-                },
-                getColumnPTOptions('headerFilterClearButton', {
-                    context: {
-                        hidden: hasRowFilter()
-                    }
-                })
-            );
-
-            return (
-                <button {...headerFilterClearButtonProps}>
-                    {filterClearIcon}
-                    <Ripple />
-                </button>
-            );
-        }
-
-        return null;
+        return (
+            <button {...headerFilterClearButtonProps}>
+                {filterClearIcon}
+                <Ripple />
+            </button>
+        );
     };
 
     const createRowItems = () => {