From ca74cce3b9026fef876de470f46e51486b7e1cf0 Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Tue, 11 Aug 2026 00:55:58 +0100
Subject: [PATCH] Enhance FilterInput component with improved positioning and
 accessibility

- Added relative positioning and z-index management to ensure the focus ring is visible above Compact siblings.
- Refactored Popover anchor to prevent wrapping of Compact items, enhancing user interaction and accessibility.
- Cleaned up JSX structure for better readability and maintainability.
---
 .../Dashboard/common/FilterInput.jsx          | 33 ++++++++++++-------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/components/Dashboard/common/FilterInput.jsx b/src/components/Dashboard/common/FilterInput.jsx
index c2ba552..3dd0e03 100644
--- a/src/components/Dashboard/common/FilterInput.jsx
+++ b/src/components/Dashboard/common/FilterInput.jsx
@@ -913,7 +913,10 @@ const FilterInput = ({
         cursor: disabled ? 'not-allowed' : 'text',
         ...style,
         // Affix ::before strut needs inline-flex; display:block stacks it and inflates height.
-        display: 'inline-flex'
+        display: 'inline-flex',
+        // Stay above Compact siblings so the focus ring isn't covered by Select/Button.
+        position: 'relative',
+        zIndex: focused ? 3 : style?.zIndex
       }}
       onClick={() => {
         if (!disabled) editorRef.current?.focus()
@@ -1028,12 +1031,7 @@ const FilterInput = ({
           </span>
         </span>
       )}
-    </span>
-  )
-
-  return wrapSharedCSSVar(
-    wrapCSSVar(
-      propertyFilterEnabled ? (
+      {propertyFilterEnabled && (
         <Popover
           open={focused}
           content={propertyFilterContent}
@@ -1046,13 +1044,24 @@ const FilterInput = ({
             }
           }}
         >
-          {input}
+          {/* Anchor only — keep Popover from wrapping the Compact item (z-index/focus ring). */}
+          <span
+            aria-hidden
+            style={{
+              position: 'absolute',
+              left: 0,
+              right: 0,
+              bottom: 0,
+              height: 0,
+              pointerEvents: 'none'
+            }}
+          />
         </Popover>
-      ) : (
-        input
-      )
-    )
+      )}
+    </span>
   )
+
+  return wrapSharedCSSVar(wrapCSSVar(input))
 }
 
 FilterInput.propTypes = {