This is an automated email from the ASF dual-hosted git repository.
pierrejeambrun pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow.git
The following commit(s) were added to refs/heads/main by this push:
new 469800c11d2 Keep the multiselect filter pill's focus ring visible
(#75307)
469800c11d2 is described below
commit 469800c11d26570b0d11cdc42ecaf4c97c191ff4
Author: Pierre Jeambrun <[email protected]>
AuthorDate: Thu Oct 22 13:11:13 2026 +0200
Keep the multiselect filter pill's focus ring visible (#75307)
While editing a tags, owners or other multiselect filter, the pill draws
its focus ring as an outline outside its box. The row below the filters
starts right at the pill's edge, so the sticky header of the Dags table
painted over the bottom of the ring.
---
.../ui/src/components/FilterBar/filters/MultiSelectPill.tsx | 9 ++++++++-
1 file changed, 8 insertions(+), 1 deletion(-)
diff --git
a/airflow-core/src/airflow/ui/src/components/FilterBar/filters/MultiSelectPill.tsx
b/airflow-core/src/airflow/ui/src/components/FilterBar/filters/MultiSelectPill.tsx
index 21d2b2dd489..ce93091f3b8 100644
---
a/airflow-core/src/airflow/ui/src/components/FilterBar/filters/MultiSelectPill.tsx
+++
b/airflow-core/src/airflow/ui/src/components/FilterBar/filters/MultiSelectPill.tsx
@@ -103,7 +103,14 @@ export const MultiSelectPill = ({
// act on Enter tears the filter down before the value it just created
commits.
renderInput={({ onBlur, onFocus, ref }) => (
<Box
- _focusWithin={{ outlineColor: "colorPalette.solid", outlineStyle:
"solid", outlineWidth: "1px" }}
+ // Drawn inside the pill's edge: an outer ring is covered by
whatever sits right below
+ // the filter row, such as the sticky header of the Dags table.
+ _focusWithin={{
+ outlineColor: "colorPalette.solid",
+ outlineOffset: "-1px",
+ outlineStyle: "solid",
+ outlineWidth: "1px",
+ }}
alignItems="center"
bg="bg"
border="0.5px solid"
