From a8c04795ba424202816b9d152bedb431e5ef7ed0 Mon Sep 17 00:00:00 2001
From: Alessandro Cuppari <me@alessandrojcm.dev>
Date: Tue, 27 May 2025 12:48:02 +0100
Subject: [PATCH] fix: use visibility hidden for global filter

Global filter was removing the clear button from the DOM which caused CLS, this uses the visibility property instead.
---
 .../inputs/MRT_GlobalFilterTextInput.tsx      | 30 ++++++++++---------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/packages/mantine-react-table/src/components/inputs/MRT_GlobalFilterTextInput.tsx b/packages/mantine-react-table/src/components/inputs/MRT_GlobalFilterTextInput.tsx
index e406cbada..590292452 100644
--- a/packages/mantine-react-table/src/components/inputs/MRT_GlobalFilterTextInput.tsx
+++ b/packages/mantine-react-table/src/components/inputs/MRT_GlobalFilterTextInput.tsx
@@ -100,20 +100,22 @@ export const MRT_GlobalFilterTextInput = <TData extends MRT_RowData>({
         onChange={(event) => setSearchValue(event.target.value)}
         placeholder={localization.search}
         rightSection={
-          searchValue ? (
-            <ActionIcon
-              aria-label={localization.clearSearch}
-              color="gray"
-              disabled={!searchValue?.length}
-              onClick={handleClear}
-              size="sm"
-              variant="transparent"
-            >
-              <Tooltip label={localization.clearSearch} withinPortal>
-                <IconX />
-              </Tooltip>
-            </ActionIcon>
-          ) : null
+          <ActionIcon
+            aria-label={localization.clearSearch}
+            color="gray"
+            disabled={!searchValue?.length}
+            hidden={!searchValue}
+            onClick={handleClear}
+            size="sm"
+            style={{
+              visibility: !searchValue ? 'hidden' : undefined,
+            }}
+            variant="transparent"
+          >
+            <Tooltip label={localization.clearSearch} withinPortal>
+              <IconX />
+            </Tooltip>
+          </ActionIcon>
         }
         value={searchValue ?? ''}
         variant="filled"