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.
This commit is contained in:
Tom Butcher 2026-08-11 00:55:58 +01:00
parent 198b1c2244
commit ca74cce3b9

View File

@ -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 = {