Fix #4994: Filter button still rendered even if show=false (#4996)

primefaces · Oct 1, 2023 · deec2b2 · deec2b2
1 parent 106452e
commit deec2b2
Showing 1 changed file with 38 additions and 34 deletions.
diff --git a/components/lib/datatable/ColumnFilter.js b/components/lib/datatable/ColumnFilter.js
@@ -522,46 +522,50 @@ export const ColumnFilter = React.memo((props) => {
     };
 
     const createMenuButton = () => {
-        if (showMenuButton()) {
-            const filterIconProps = mergeProps(
-                {
-                    'aria-hidden': true
-                },
-                getColumnPTOptions('filterIcon')
-            );
-            const icon = props.filterIcon || <FilterIcon {...filterIconProps} />;
-            const columnFilterIcon = IconUtils.getJSXIcon(icon, { ...filterIconProps }, { props });
+        if (!showMenuButton()) {
+            return null;
+        }
 
-            const label = filterLabel();
-            const filterMenuButtonProps = mergeProps(
-                {
-                    type: 'button',
-                    className: cx('filterMenuButton', { overlayVisibleState, hasFilter }),
-                    'aria-haspopup': true,
-                    'aria-expanded': overlayVisibleState,
-                    onClick: (e) => toggleMenu(e),
-                    onKeyDown: (e) => onToggleButtonKeyDown(e),
-                    'aria-label': label
-                },
-                getColumnPTOptions('filterMenuButton', {
-                    context: {
-                        active: hasFilter()
-                    }
-                })
-            );
+        const filterIconProps = mergeProps(
+            {
+                'aria-hidden': true
+            },
+            getColumnPTOptions('filterIcon')
+        );
+        const icon = props.filterIcon || <FilterIcon {...filterIconProps} />;
+        const columnFilterIcon = IconUtils.getJSXIcon(icon, { ...filterIconProps }, { props });
 
-            return (
-                <button ref={iconRef} {...filterMenuButtonProps}>
-                    {columnFilterIcon}
-                    <Ripple />
-                </button>
-            );
-        }
+        const label = filterLabel();
+        const filterMenuButtonProps = mergeProps(
+            {
+                type: 'button',
+                className: cx('filterMenuButton', { overlayVisibleState, hasFilter }),
+                'aria-haspopup': true,
+                'aria-expanded': overlayVisibleState,
+                onClick: (e) => toggleMenu(e),
+                onKeyDown: (e) => onToggleButtonKeyDown(e),
+                'aria-label': label
+            },
+            getColumnPTOptions('filterMenuButton', {
+                context: {
+                    active: hasFilter()
+                }
+            })
+        );
 
-        return null;
+        return (
+            <button ref={iconRef} {...filterMenuButtonProps}>
+                {columnFilterIcon}
+                <Ripple />
+            </button>
+        );
     };
 
     const createClearButton = () => {
+        if (!showMenuButton()) {
+            return null;
+        }
+
         const filterClearIconProps = mergeProps(
             {
                 'aria-hidden': true