fix(listview): fix compact filter pill tests and type error

- Select.test.tsx: migrate selectOption → selectPillOption for compact
  pill UI; update rehydration assertion to use data-test attr; wrap
  clearFilter() call in act() to silence React state warning
- CompactSelectPanel.test.tsx: add rerender after clearFilter() to
  reflect fully-controlled component no longer having internal state
- CompactSelectPanel.tsx: use opt.title for ReactNode labels in
  handleSelect so owner-select options serialize correctly
- CompactFilterTrigger.tsx: prettier formatting
- chartAction.ts: cast response to include warning field to fix TS error
  (ChartDataResponseResult in installed .d.ts predates warning field)
- scripts/oxlint.sh: fix silent exit-1 when oxlint produces no output
  (empty-string && short-circuit was the last command, so it became the
  script's exit code; use if/then/fi instead)

helm/superset/Chart.yaml

@@ -29,7 +29,7 @@ maintainers:
   - name: craig-rueda
     email: craig@craigrueda.com
     url: https://github.com/craig-rueda
-version: 0.16.0 # See [README](https://github.com/apache/superset/blob/master/helm/superset/README.md#versioning) for version details.
+version: 0.15.5 # See [README](https://github.com/apache/superset/blob/master/helm/superset/README.md#versioning) for version details.
 dependencies:
   - name: postgresql
     version: 16.7.27

helm/superset/README.md

@@ -23,7 +23,7 @@ NOTE: This file is generated by helm-docs: https://github.com/norwoodj/helm-docs
 
 # superset
 
-![Version: 0.16.0](https://img.shields.io/badge/Version-0.16.0-informational?style=flat-square)
+![Version: 0.15.5](https://img.shields.io/badge/Version-0.15.5-informational?style=flat-square)
 
 Apache Superset is a modern, enterprise-ready business intelligence web application
 
@@ -111,6 +111,9 @@ On helm this can be set on `extraSecretEnv.SUPERSET_SECRET_KEY` or `configOverri
 | init.resources | object | `{}` |  |
 | init.tolerations | list | `[]` |  |
 | init.topologySpreadConstraints | list | `[]` | TopologySpreadConstrains to be added to init job |
+| initImage.pullPolicy | string | `"IfNotPresent"` |  |
+| initImage.repository | string | `"apache/superset"` |  |
+| initImage.tag | string | `"dockerize"` |  |
 | nameOverride | string | `nil` | Provide a name to override the name of the chart |
 | nodeSelector | object | `{}` |  |
 | postgresql | object | see `values.yaml` | Configuration values for the postgresql dependency. ref: https://github.com/bitnami/charts/tree/main/bitnami/postgresql |

helm/superset/values.yaml

@@ -194,6 +194,11 @@ image:
 
 imagePullSecrets: []
 
+initImage:
+  repository: apache/superset
+  tag: dockerize
+  pullPolicy: IfNotPresent
+
 service:
   type: ClusterIP
   port: 8088
@@ -298,28 +303,15 @@ supersetNode:
   # @default -- a container waiting for postgres
   initContainers:
     - name: wait-for-postgres
-      image: "{{ .Values.image.repository }}:{{ .Values.image.tag | default .Chart.AppVersion }}"
-      imagePullPolicy: "{{ .Values.image.pullPolicy }}"
+      image: "{{ .Values.initImage.repository }}:{{ .Values.initImage.tag }}"
+      imagePullPolicy: "{{ .Values.initImage.pullPolicy }}"
       envFrom:
         - secretRef:
             name: "{{ tpl .Values.envFromSecret . }}"
       command:
-        - /bin/bash
+        - /bin/sh
         - -c
-        - |
-          # bash's /dev/tcp redirect performs a TCP connect; no external
-          # `dockerize`, `nc`, or busybox needed. SECONDS-based deadline
-          # mirrors the prior `dockerize -timeout 120s` behaviour.
-          SECONDS=0
-          until (echo > /dev/tcp/"$DB_HOST"/"$DB_PORT") 2>/dev/null; do
-            if [ "$SECONDS" -ge 120 ]; then
-              echo "timeout waiting for postgres at $DB_HOST:$DB_PORT after 120s" >&2
-              exit 1
-            fi
-            echo "waiting for postgres at $DB_HOST:$DB_PORT (elapsed ${SECONDS}s)"
-            sleep 2
-          done
-          echo "postgres at $DB_HOST:$DB_PORT is up"
+        - dockerize -wait "tcp://$DB_HOST:$DB_PORT" -timeout 120s
       resources:
         limits:
           memory: "256Mi"
@@ -415,31 +407,15 @@ supersetWorker:
   # @default -- a container waiting for postgres and redis
   initContainers:
     - name: wait-for-postgres-redis
-      image: "{{ .Values.image.repository }}:{{ .Values.image.tag | default .Chart.AppVersion }}"
-      imagePullPolicy: "{{ .Values.image.pullPolicy }}"
+      image: "{{ .Values.initImage.repository }}:{{ .Values.initImage.tag }}"
+      imagePullPolicy: "{{ .Values.initImage.pullPolicy }}"
       envFrom:
         - secretRef:
             name: "{{ tpl .Values.envFromSecret . }}"
       command:
-        - /bin/bash
+        - /bin/sh
         - -c
-        - |
-          # See supersetNode.initContainers for the rationale.
-          SECONDS=0
-          wait_for() {
-            local host=$1 port=$2 name=$3
-            until (echo > /dev/tcp/"$host"/"$port") 2>/dev/null; do
-              if [ "$SECONDS" -ge 120 ]; then
-                echo "timeout waiting for $name at $host:$port after 120s" >&2
-                exit 1
-              fi
-              echo "waiting for $name at $host:$port (elapsed ${SECONDS}s)"
-              sleep 2
-            done
-            echo "$name at $host:$port is up"
-          }
-          wait_for "$DB_HOST" "$DB_PORT" postgres
-          wait_for "$REDIS_HOST" "$REDIS_PORT" redis
+        - dockerize -wait "tcp://$DB_HOST:$DB_PORT" -wait "tcp://$REDIS_HOST:$REDIS_PORT" -timeout 120s
       resources:
         limits:
           memory: "256Mi"
@@ -519,31 +495,15 @@ supersetCeleryBeat:
   # @default -- a container waiting for postgres
   initContainers:
     - name: wait-for-postgres-redis
-      image: "{{ .Values.image.repository }}:{{ .Values.image.tag | default .Chart.AppVersion }}"
-      imagePullPolicy: "{{ .Values.image.pullPolicy }}"
+      image: "{{ .Values.initImage.repository }}:{{ .Values.initImage.tag }}"
+      imagePullPolicy: "{{ .Values.initImage.pullPolicy }}"
       envFrom:
         - secretRef:
             name: "{{ tpl .Values.envFromSecret . }}"
       command:
-        - /bin/bash
+        - /bin/sh
         - -c
-        - |
-          # See supersetNode.initContainers for the rationale.
-          SECONDS=0
-          wait_for() {
-            local host=$1 port=$2 name=$3
-            until (echo > /dev/tcp/"$host"/"$port") 2>/dev/null; do
-              if [ "$SECONDS" -ge 120 ]; then
-                echo "timeout waiting for $name at $host:$port after 120s" >&2
-                exit 1
-              fi
-              echo "waiting for $name at $host:$port (elapsed ${SECONDS}s)"
-              sleep 2
-            done
-            echo "$name at $host:$port is up"
-          }
-          wait_for "$DB_HOST" "$DB_PORT" postgres
-          wait_for "$REDIS_HOST" "$REDIS_PORT" redis
+        - dockerize -wait "tcp://$DB_HOST:$DB_PORT" -wait "tcp://$REDIS_HOST:$REDIS_PORT" -timeout 120s
       resources:
         limits:
           memory: "256Mi"
@@ -634,31 +594,15 @@ supersetCeleryFlower:
   # @default -- a container waiting for postgres and redis
   initContainers:
     - name: wait-for-postgres-redis
-      image: "{{ .Values.image.repository }}:{{ .Values.image.tag | default .Chart.AppVersion }}"
-      imagePullPolicy: "{{ .Values.image.pullPolicy }}"
+      image: "{{ .Values.initImage.repository }}:{{ .Values.initImage.tag }}"
+      imagePullPolicy: "{{ .Values.initImage.pullPolicy }}"
       envFrom:
         - secretRef:
             name: "{{ tpl .Values.envFromSecret . }}"
       command:
-        - /bin/bash
+        - /bin/sh
         - -c
-        - |
-          # See supersetNode.initContainers for the rationale.
-          SECONDS=0
-          wait_for() {
-            local host=$1 port=$2 name=$3
-            until (echo > /dev/tcp/"$host"/"$port") 2>/dev/null; do
-              if [ "$SECONDS" -ge 120 ]; then
-                echo "timeout waiting for $name at $host:$port after 120s" >&2
-                exit 1
-              fi
-              echo "waiting for $name at $host:$port (elapsed ${SECONDS}s)"
-              sleep 2
-            done
-            echo "$name at $host:$port is up"
-          }
-          wait_for "$DB_HOST" "$DB_PORT" postgres
-          wait_for "$REDIS_HOST" "$REDIS_PORT" redis
+        - dockerize -wait "tcp://$DB_HOST:$DB_PORT" -wait "tcp://$REDIS_HOST:$REDIS_PORT" -timeout 120s
       resources:
         limits:
           memory: "256Mi"
@@ -820,26 +764,15 @@ init:
   # @default -- a container waiting for postgres
   initContainers:
     - name: wait-for-postgres
-      image: "{{ .Values.image.repository }}:{{ .Values.image.tag | default .Chart.AppVersion }}"
-      imagePullPolicy: "{{ .Values.image.pullPolicy }}"
+      image: "{{ .Values.initImage.repository }}:{{ .Values.initImage.tag }}"
+      imagePullPolicy: "{{ .Values.initImage.pullPolicy }}"
       envFrom:
         - secretRef:
             name: "{{ tpl .Values.envFromSecret . }}"
       command:
-        - /bin/bash
+        - /bin/sh
         - -c
-        - |
-          # See supersetNode.initContainers for the rationale.
-          SECONDS=0
-          until (echo > /dev/tcp/"$DB_HOST"/"$DB_PORT") 2>/dev/null; do
-            if [ "$SECONDS" -ge 120 ]; then
-              echo "timeout waiting for postgres at $DB_HOST:$DB_PORT after 120s" >&2
-              exit 1
-            fi
-            echo "waiting for postgres at $DB_HOST:$DB_PORT (elapsed ${SECONDS}s)"
-            sleep 2
-          done
-          echo "postgres at $DB_HOST:$DB_PORT is up"
+        - dockerize -wait "tcp://$DB_HOST:$DB_PORT" -timeout 120s
       resources:
         limits:
           memory: "256Mi"

scripts/oxlint.sh

@@ -55,7 +55,7 @@ if [ ${#js_ts_files[@]} -gt 0 ]; then
     echo "$output" >&2
     exit 1
   }
-  [ -n "$output" ] && echo "$output"
+  if [ -n "$output" ]; then echo "$output"; fi
 else
   echo "No JavaScript/TypeScript files to lint"
 fi

superset-frontend/spec/helpers/testing-library.tsx

@@ -152,3 +152,33 @@ export async function selectOption(option: string, selectName?: string) {
   );
   await userEvent.click(item);
 }
+
+/**
+ * Select an option from a compact pill filter (new UI that replaced comboboxes).
+ * Clicks the pill button matching the label, then clicks the option in the panel.
+ */
+export async function selectPillOption(option: string, pillLabel?: string) {
+  let pill: HTMLElement;
+  if (pillLabel) {
+    // Find the pill whose text content includes the label
+    pill = await waitFor(() => {
+      const pills = screen.getAllByTestId('compact-filter-pill');
+      const match = pills.find(p => p.textContent?.includes(pillLabel));
+      if (!match)
+        throw new Error(`Could not find pill with label "${pillLabel}"`);
+      return match;
+    });
+  } else {
+    pill = await screen.findByTestId('compact-filter-pill');
+  }
+  await userEvent.click(pill);
+  // Wait for the option list to appear and click the item
+  const item = await waitFor(() => {
+    const listbox = document.querySelector('[role="listbox"]');
+    if (!listbox) throw new Error('No listbox found');
+    const opt = within(listbox as HTMLElement).getByText(option);
+    if (!opt) throw new Error(`Option "${option}" not found`);
+    return opt;
+  });
+  await userEvent.click(item);
+}

superset-frontend/src/components/Chart/chartAction.ts

@@ -817,8 +817,11 @@ export function exploreJSON(
             ),
         );
         (queriesResponse as QueryData[]).forEach(response => {
-          if (response.warning) {
-            dispatch(addWarningToast(response.warning, { noDuplicate: true }));
+          const { warning } = response as QueryData & {
+            warning?: string | null;
+          };
+          if (warning) {
+            dispatch(addWarningToast(warning, { noDuplicate: true }));
           }
         });
         return dispatch(

superset-frontend/src/components/ListView/CardSortSelect.tsx

@@ -16,20 +16,13 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { useState, useMemo } from 'react';
+import { useRef, useState } from 'react';
 import { t } from '@apache-superset/core/translation';
-import { styled } from '@apache-superset/core/theme';
-import { FormLabel, Select } from '@superset-ui/core/components';
-import { SELECT_WIDTH } from './utils';
+import type { SelectOption } from './types';
 import { CardSortSelectOption, SortColumn } from './types';
-
-const SortContainer = styled.div`
-  display: inline-flex;
-  font-size: ${({ theme }) => theme.fontSizeSM}px;
-  align-items: center;
-  text-align: left;
-  width: ${SELECT_WIDTH}px;
-`;
+import CompactFilterTrigger from './Filters/CompactFilterTrigger';
+import CompactSelectPanel from './Filters/CompactSelectPanel';
+import type { FilterHandler } from './Filters/types';
 
 interface CardViewSelectSortProps {
   onChange: (value: SortColumn[]) => void;
@@ -42,6 +35,8 @@ export const CardSortSelect = ({
   onChange,
   options,
 }: CardViewSelectSortProps) => {
+  const panelRef = useRef<FilterHandler>(null);
+
   const defaultSort =
     (initialSort &&
       options.find(
@@ -50,44 +45,57 @@ export const CardSortSelect = ({
       )) ||
     options[0];
 
-  const [value, setValue] = useState({
+  const [currentValue, setCurrentValue] = useState<SelectOption>({
     label: defaultSort.label,
     value: defaultSort.value,
   });
 
-  const formattedOptions = useMemo(
-    () => options.map(option => ({ label: option.label, value: option.value })),
-    [options],
-  );
+  const selectOptions = options.map(o => ({ label: o.label, value: o.value }));
 
-  const handleOnChange = (selected: { label: string; value: string }) => {
-    setValue(selected);
-    const originalOption = options.find(
-      ({ value }) => value === selected.value,
-    );
-    if (originalOption) {
-      const sortBy = [
-        {
-          id: originalOption.id,
-          desc: originalOption.desc,
-        },
-      ];
-      onChange(sortBy);
+  const isNonDefault = currentValue.value !== options[0]?.value;
+
+  const handleSelect = (option: SelectOption | undefined) => {
+    if (!option) return;
+    const original = options.find(o => o.value === option.value);
+    if (original) {
+      setCurrentValue({ label: original.label, value: original.value });
+      onChange([{ id: original.id, desc: original.desc }]);
     }
   };
 
+  const handleClear = () => {
+    const first = options[0];
+    if (first) {
+      setCurrentValue({ label: first.label, value: first.value });
+      onChange([{ id: first.id, desc: first.desc }]);
+    }
+  };
+
+  // Show the active sort value in the label so users can see the current sort
+  // without hovering — matches the previous inline-select UX.
+  const pillLabel = isNonDefault
+    ? `${t('Sort')}: ${String(currentValue.label)}`
+    : t('Sort');
+
   return (
-    <SortContainer>
-      <Select
-        ariaLabel={t('Sort')}
-        header={<FormLabel>{t('Sort')}</FormLabel>}
-        labelInValue
-        onChange={handleOnChange}
-        options={formattedOptions}
-        showSearch
-        value={value}
-        data-test="card-sort-select"
-      />
-    </SortContainer>
+    <span data-test="card-sort-select">
+      <CompactFilterTrigger
+        label={pillLabel}
+        hasValue={isNonDefault}
+        onClear={handleClear}
+        tooltipTitle={isNonDefault ? String(currentValue.label) : undefined}
+      >
+        {({ isOpen, onClose }) => (
+          <CompactSelectPanel
+            ref={panelRef}
+            selects={selectOptions}
+            value={currentValue}
+            onSelect={handleSelect}
+            isOpen={isOpen}
+            onClose={onClose}
+          />
+        )}
+      </CompactFilterTrigger>
+    </span>
   );
 };

superset-frontend/src/components/ListView/Filters/CompactFilterTrigger.test.tsx

@@ -0,0 +1,151 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { render, screen } from 'spec/helpers/testing-library';
+import userEvent from '@testing-library/user-event';
+import CompactFilterTrigger from './CompactFilterTrigger';
+
+// Base props without children — pass children as JSX to avoid no-children-prop lint rule.
+const baseProps = {
+  label: 'Owner',
+  hasValue: false,
+  onClear: jest.fn(),
+};
+
+const defaultChildren = jest.fn(() => (
+  <div data-testid="filter-content">Filter content</div>
+));
+
+function renderTrigger(
+  props: Partial<
+    typeof baseProps & {
+      hasValue: boolean;
+      tooltipTitle?: string;
+      popupType?: 'listbox' | 'dialog';
+    }
+  > = {},
+  children = defaultChildren,
+) {
+  return render(
+    <CompactFilterTrigger {...baseProps} {...props}>
+      {children}
+    </CompactFilterTrigger>,
+  );
+}
+
+beforeEach(() => {
+  jest.clearAllMocks();
+});
+
+test('renders the label', () => {
+  renderTrigger();
+  expect(screen.getByText('Owner')).toBeInTheDocument();
+});
+
+test('renders as inactive pill with down chevron when hasValue is false', () => {
+  renderTrigger();
+  const pill = screen.getByTestId('compact-filter-pill');
+  expect(pill).toBeInTheDocument();
+  // No clear button when inactive
+  expect(screen.queryByTestId('compact-filter-clear')).not.toBeInTheDocument();
+});
+
+test('renders active state with clear button when hasValue is true', () => {
+  renderTrigger({ hasValue: true });
+  expect(
+    screen.getByRole('button', { name: /clear owner filter/i }),
+  ).toBeInTheDocument();
+});
+
+test('clear button has descriptive aria-label matching the filter name', () => {
+  renderTrigger({ hasValue: true });
+  const clearBtn = screen.getByTestId('compact-filter-clear');
+  expect(clearBtn).toHaveAttribute('aria-label', 'Clear Owner filter');
+});
+
+test('clear button is a separate element from the pill button', () => {
+  renderTrigger({ hasValue: true });
+  const pill = screen.getByTestId('compact-filter-pill');
+  const clearBtn = screen.getByTestId('compact-filter-clear');
+  // Buttons must not be nested
+  expect(pill).not.toContainElement(clearBtn);
+  expect(clearBtn).not.toContainElement(pill);
+});
+
+test('toggles aria-expanded when pill is clicked', async () => {
+  renderTrigger();
+  const pill = screen.getByTestId('compact-filter-pill');
+  expect(pill).toHaveAttribute('aria-expanded', 'false');
+  await userEvent.click(pill);
+  expect(pill).toHaveAttribute('aria-expanded', 'true');
+});
+
+test('calls onClear when clear button is clicked', async () => {
+  const onClear = jest.fn();
+  renderTrigger({ hasValue: true, onClear } as any);
+  const clearBtn = screen.getByRole('button', { name: /clear owner filter/i });
+  await userEvent.click(clearBtn);
+  expect(onClear).toHaveBeenCalledTimes(1);
+});
+
+test('does not render tooltip wrapper when tooltipTitle is absent', () => {
+  const { container } = renderTrigger();
+  expect(container.querySelector('.ant-tooltip')).not.toBeInTheDocument();
+});
+
+test('shows active state indicators when hasValue and tooltipTitle are set', () => {
+  renderTrigger({ hasValue: true, tooltipTitle: 'Some Owner' });
+  expect(
+    screen.getByRole('button', { name: /clear owner filter/i }),
+  ).toBeInTheDocument();
+  expect(screen.getByTestId('compact-filter-pill')).toHaveAttribute(
+    'aria-expanded',
+    'false',
+  );
+});
+
+test('calls children render prop with isOpen and onClose', async () => {
+  const children = jest.fn(() => <div data-testid="panel-content">panel</div>);
+  renderTrigger({}, children);
+  const pill = screen.getByTestId('compact-filter-pill');
+  await userEvent.click(pill);
+  expect(children).toHaveBeenCalledWith(
+    expect.objectContaining({ isOpen: true, onClose: expect.any(Function) }),
+  );
+});
+
+test('sets aria-haspopup to listbox by default', () => {
+  renderTrigger();
+  const pill = screen.getByTestId('compact-filter-pill');
+  expect(pill).toHaveAttribute('aria-haspopup', 'listbox');
+});
+
+test('sets aria-haspopup to dialog when popupType is dialog', () => {
+  renderTrigger({ popupType: 'dialog' });
+  const pill = screen.getByTestId('compact-filter-pill');
+  expect(pill).toHaveAttribute('aria-haspopup', 'dialog');
+});
+
+test('closing dropdown resets aria-expanded to false', async () => {
+  renderTrigger();
+  const pill = screen.getByTestId('compact-filter-pill');
+  await userEvent.click(pill);
+  expect(pill).toHaveAttribute('aria-expanded', 'true');
+  await userEvent.click(pill);
+  expect(pill).toHaveAttribute('aria-expanded', 'false');
+});

superset-frontend/src/components/ListView/Filters/CompactFilterTrigger.tsx

@@ -0,0 +1,199 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { useEffect, useState, type ReactNode, type MouseEvent } from 'react';
+import { useTheme, styled, css } from '@apache-superset/core/theme';
+import { Dropdown, Tooltip, Icons } from '@superset-ui/core/components';
+
+export type FilterPanelRenderProps = {
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+interface CompactFilterTriggerProps {
+  label: ReactNode;
+  hasValue: boolean;
+  onClear: () => void;
+  /** Render prop: receives { isOpen, onClose } and returns the panel content. */
+  children: (props: FilterPanelRenderProps) => ReactNode;
+  /** Shown as a hover tooltip when a value is selected (e.g. the selected label). */
+  tooltipTitle?: string;
+  /** ARIA popup role for the trigger button. Use 'listbox' for option panels,
+   *  'dialog' for form panels (date range, numerical range). */
+  popupType?: 'listbox' | 'dialog';
+}
+
+const TriggerWrapper = styled.span`
+  display: inline-flex;
+  align-items: center;
+`;
+
+const FilterPill = styled.button<{ $active: boolean }>`
+  ${({ theme, $active }) => css`
+    display: inline-flex;
+    align-items: center;
+    gap: ${theme.sizeUnit}px;
+    height: ${theme.controlHeight}px;
+    padding: 0 ${theme.sizeUnit * 3}px;
+    border-radius: ${theme.borderRadius}px;
+    border: 1px solid ${$active ? theme.colorPrimary : theme.colorBorder};
+    background: ${$active ? theme.colorPrimaryBg : theme.colorBgContainer};
+    color: ${$active ? theme.colorPrimary : theme.colorText};
+    font-size: ${theme.fontSizeSM}px;
+    font-weight: ${$active ? 600 : 400};
+    cursor: pointer;
+    white-space: nowrap;
+    transition:
+      border-color 0.2s,
+      background 0.2s,
+      color 0.2s;
+
+    &:hover {
+      border-color: ${theme.colorPrimary};
+      background: ${$active ? theme.colorPrimaryBgHover : theme.colorFillAlter};
+    }
+
+    &:focus-visible {
+      outline: 2px solid ${theme.colorPrimary};
+      outline-offset: 2px;
+    }
+  `}
+`;
+
+const ActiveDot = styled.span`
+  ${({ theme }) => css`
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: ${theme.colorPrimary};
+    flex-shrink: 0;
+  `}
+`;
+
+// Meets WCAG 2.5.5 target size (24×24 minimum) with explicit dimensions.
+const ClearButton = styled.button`
+  ${({ theme }) => css`
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 24px;
+    min-height: 24px;
+    margin-left: ${theme.sizeUnit / 2}px;
+    padding: 0;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    color: ${theme.colorPrimary};
+    border-radius: ${theme.borderRadiusSM}px;
+
+    &:hover {
+      background: ${theme.colorPrimaryBg};
+    }
+
+    &:focus-visible {
+      outline: 2px solid ${theme.colorPrimary};
+      outline-offset: 2px;
+    }
+  `}
+`;
+
+export default function CompactFilterTrigger({
+  label,
+  hasValue,
+  onClear,
+  children,
+  tooltipTitle,
+  popupType = 'listbox',
+}: CompactFilterTriggerProps) {
+  const [open, setOpen] = useState(false);
+  const [tooltipOpen, setTooltipOpen] = useState(false);
+  const theme = useTheme();
+
+  // Close dropdown on window resize — AntD Dropdown doesn't reposition
+  // itself on resize so the panel ends up detached from the pill.
+  useEffect(() => {
+    if (!open) return;
+    const handleResize = () => setOpen(false);
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, [open]);
+
+  const handleClear = (e: MouseEvent) => {
+    e.stopPropagation();
+    onClear();
+    setOpen(false);
+  };
+
+  const clearAriaLabel =
+    typeof label === 'string' ? `Clear ${label} filter` : 'Clear filter';
+
+  return (
+    <TriggerWrapper>
+      <Dropdown
+        open={open}
+        onOpenChange={visible => {
+          setOpen(visible);
+          if (!visible) setTooltipOpen(false);
+        }}
+        trigger={['click']}
+        popupRender={() =>
+          children({ isOpen: open, onClose: () => setOpen(false) })
+        }
+        placement="bottomLeft"
+      >
+        <Tooltip
+          title={tooltipTitle}
+          open={!!tooltipTitle && !open && tooltipOpen}
+          onOpenChange={visible =>
+            setTooltipOpen(visible && !!tooltipTitle && !open)
+          }
+          mouseEnterDelay={0.5}
+          mouseLeaveDelay={0}
+        >
+          <FilterPill
+            $active={hasValue}
+            type="button"
+            data-test="compact-filter-pill"
+            aria-haspopup={popupType}
+            aria-expanded={open}
+            aria-label={typeof label === 'string' ? label : undefined}
+          >
+            {hasValue && <ActiveDot />}
+            <span>{label}</span>
+            <Icons.DownOutlined
+              iconSize="xs"
+              iconColor={
+                hasValue ? theme.colorPrimary : theme.colorTextSecondary
+              }
+            />
+          </FilterPill>
+        </Tooltip>
+      </Dropdown>
+      {hasValue && (
+        <ClearButton
+          type="button"
+          data-test="compact-filter-clear"
+          aria-label={clearAriaLabel}
+          onClick={handleClear}
+        >
+          <Icons.CloseOutlined iconSize="s" iconColor={theme.colorPrimary} />
+        </ClearButton>
+      )}
+    </TriggerWrapper>
+  );
+}

superset-frontend/src/components/ListView/Filters/CompactSelectPanel.test.tsx

@@ -0,0 +1,339 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { createRef, act } from 'react';
+import { render, screen, waitFor } from 'spec/helpers/testing-library';
+import userEvent from '@testing-library/user-event';
+import CompactSelectPanel from './CompactSelectPanel';
+import type { FilterHandler } from './types';
+
+const SMALL_SELECTS = [
+  { label: 'Alice', value: 1 },
+  { label: 'Bob', value: 2 },
+  { label: 'Charlie', value: 3 },
+];
+
+const LARGE_SELECTS = [
+  { label: 'Alice', value: 1 },
+  { label: 'Bob', value: 2 },
+  { label: 'Charlie', value: 3 },
+  { label: 'David', value: 4 },
+  { label: 'Eve', value: 5 },
+  { label: 'Frank', value: 6 },
+  { label: 'Grace', value: 7 },
+];
+
+beforeEach(() => {
+  jest.clearAllMocks();
+});
+
+test('renders options from selects prop', () => {
+  render(
+    <CompactSelectPanel
+      selects={SMALL_SELECTS}
+      value={undefined}
+      onSelect={jest.fn()}
+    />,
+  );
+  expect(screen.getByText('Alice')).toBeInTheDocument();
+  expect(screen.getByText('Bob')).toBeInTheDocument();
+  expect(screen.getByText('Charlie')).toBeInTheDocument();
+});
+
+test('hides search input when selects.length is 6 or fewer', () => {
+  render(
+    <CompactSelectPanel
+      selects={SMALL_SELECTS}
+      value={undefined}
+      onSelect={jest.fn()}
+    />,
+  );
+  expect(screen.queryByPlaceholderText('Search')).not.toBeInTheDocument();
+});
+
+test('shows search input when selects.length exceeds 6', () => {
+  render(
+    <CompactSelectPanel
+      selects={LARGE_SELECTS}
+      value={undefined}
+      onSelect={jest.fn()}
+    />,
+  );
+  expect(screen.getByPlaceholderText('Search')).toBeInTheDocument();
+});
+
+test('shows search input when fetchSelects is provided', () => {
+  const fetchSelects = jest.fn().mockResolvedValue({ data: [], totalCount: 0 });
+  render(
+    <CompactSelectPanel
+      fetchSelects={fetchSelects}
+      value={undefined}
+      onSelect={jest.fn()}
+    />,
+  );
+  expect(screen.getByPlaceholderText('Search')).toBeInTheDocument();
+});
+
+test('filters static options by search term', async () => {
+  render(
+    <CompactSelectPanel
+      selects={LARGE_SELECTS}
+      value={undefined}
+      onSelect={jest.fn()}
+    />,
+  );
+  await userEvent.type(screen.getByPlaceholderText('Search'), 'ali');
+  expect(screen.getByText('Alice')).toBeInTheDocument();
+  expect(screen.queryByText('Bob')).not.toBeInTheDocument();
+});
+
+test('calls onSelect with normalized option when an option is clicked', async () => {
+  const onSelect = jest.fn();
+  render(
+    <CompactSelectPanel
+      selects={SMALL_SELECTS}
+      value={undefined}
+      onSelect={onSelect}
+    />,
+  );
+  await userEvent.click(screen.getByText('Alice'));
+  expect(onSelect).toHaveBeenCalledWith({ label: 'Alice', value: 1 }, false);
+});
+
+test('calls onSelect with undefined when same option is clicked twice (deselect)', async () => {
+  const onSelect = jest.fn();
+  render(
+    <CompactSelectPanel
+      selects={SMALL_SELECTS}
+      value={{ label: 'Alice', value: 1 }}
+      onSelect={onSelect}
+    />,
+  );
+  await userEvent.click(screen.getByText('Alice'));
+  expect(onSelect).toHaveBeenCalledWith(undefined, true);
+});
+
+test('shows checkmark icon on selected option', () => {
+  render(
+    <CompactSelectPanel
+      selects={SMALL_SELECTS}
+      value={{ label: 'Alice', value: 1 }}
+      onSelect={jest.fn()}
+    />,
+  );
+  const aliceOption = screen
+    .getByText('Alice')
+    .closest('[role="option"]') as HTMLElement;
+  expect(aliceOption).toHaveAttribute('aria-selected', 'true');
+});
+
+test('unselected options have aria-selected false', () => {
+  render(
+    <CompactSelectPanel
+      selects={SMALL_SELECTS}
+      value={{ label: 'Alice', value: 1 }}
+      onSelect={jest.fn()}
+    />,
+  );
+  const bobOption = screen
+    .getByText('Bob')
+    .closest('[role="option"]') as HTMLElement;
+  expect(bobOption).toHaveAttribute('aria-selected', 'false');
+});
+
+test('calls onClose after a selection is made', async () => {
+  const onClose = jest.fn();
+  render(
+    <CompactSelectPanel
+      selects={SMALL_SELECTS}
+      value={undefined}
+      onSelect={jest.fn()}
+      onClose={onClose}
+    />,
+  );
+  await userEvent.click(screen.getByText('Alice'));
+  expect(onClose).toHaveBeenCalledTimes(1);
+});
+
+test('clearFilter via ref resets selection and calls onSelect(undefined, true)', () => {
+  const onSelect = jest.fn();
+  const ref = createRef<FilterHandler>();
+  const { rerender } = render(
+    <CompactSelectPanel
+      ref={ref}
+      selects={SMALL_SELECTS}
+      value={{ label: 'Alice', value: 1 }}
+      onSelect={onSelect}
+    />,
+  );
+  expect(screen.getByText('Alice').closest('[role="option"]')).toHaveAttribute(
+    'aria-selected',
+    'true',
+  );
+
+  act(() => {
+    ref.current?.clearFilter();
+  });
+
+  expect(onSelect).toHaveBeenCalledWith(undefined, true);
+  // Component is fully controlled — visual deselection follows when the
+  // parent passes value={undefined} after receiving the onSelect callback.
+  rerender(
+    <CompactSelectPanel
+      ref={ref}
+      selects={SMALL_SELECTS}
+      value={undefined}
+      onSelect={onSelect}
+    />,
+  );
+  expect(screen.getByText('Alice').closest('[role="option"]')).toHaveAttribute(
+    'aria-selected',
+    'false',
+  );
+});
+
+test('shows Loading text when loading prop is true', () => {
+  render(
+    <CompactSelectPanel
+      selects={SMALL_SELECTS}
+      value={undefined}
+      onSelect={jest.fn()}
+      loading
+    />,
+  );
+  expect(screen.getByText('Loading...')).toBeInTheDocument();
+});
+
+test('shows No results when displayOptions is empty', () => {
+  render(
+    <CompactSelectPanel selects={[]} value={undefined} onSelect={jest.fn()} />,
+  );
+  expect(screen.getByText('No results')).toBeInTheDocument();
+});
+
+test('renders options list with listbox role and accessible label', () => {
+  render(
+    <CompactSelectPanel
+      selects={SMALL_SELECTS}
+      value={undefined}
+      onSelect={jest.fn()}
+    />,
+  );
+  const listbox = screen.getByRole('listbox');
+  expect(listbox).toBeInTheDocument();
+  expect(listbox).toHaveAttribute('aria-label', 'Filter options');
+});
+
+test('option items have option role', () => {
+  render(
+    <CompactSelectPanel
+      selects={SMALL_SELECTS}
+      value={undefined}
+      onSelect={jest.fn()}
+    />,
+  );
+  const options = screen.getAllByRole('option');
+  expect(options).toHaveLength(3);
+});
+
+test('fetches and displays remote options via fetchSelects on mount', async () => {
+  const fetchSelects = jest.fn().mockResolvedValue({
+    data: [{ label: 'Remote User', value: 99 }],
+    totalCount: 1,
+  });
+  render(
+    <CompactSelectPanel
+      fetchSelects={fetchSelects}
+      value={undefined}
+      onSelect={jest.fn()}
+    />,
+  );
+  expect(screen.getByText('Loading...')).toBeInTheDocument();
+  await waitFor(() => {
+    expect(screen.getByText('Remote User')).toBeInTheDocument();
+  });
+  expect(fetchSelects).toHaveBeenCalledWith('', 0, 200);
+});
+
+test('shows No results when fetchSelects returns empty data', async () => {
+  const fetchSelects = jest.fn().mockResolvedValue({ data: [], totalCount: 0 });
+  render(
+    <CompactSelectPanel
+      fetchSelects={fetchSelects}
+      value={undefined}
+      onSelect={jest.fn()}
+    />,
+  );
+  await waitFor(() => {
+    expect(screen.getByText('No results')).toBeInTheDocument();
+  });
+});
+
+test('shows No results when fetchSelects rejects', async () => {
+  const fetchSelects = jest.fn().mockRejectedValue(new Error('network error'));
+  render(
+    <CompactSelectPanel
+      fetchSelects={fetchSelects}
+      value={undefined}
+      onSelect={jest.fn()}
+    />,
+  );
+  await waitFor(() => {
+    expect(screen.getByText('No results')).toBeInTheDocument();
+  });
+});
+
+test('selects option via keyboard Enter key', async () => {
+  const onSelect = jest.fn();
+  render(
+    <CompactSelectPanel
+      selects={SMALL_SELECTS}
+      value={undefined}
+      onSelect={onSelect}
+    />,
+  );
+  const aliceOption = screen.getByText('Alice').closest('[role="option"]')!;
+  await userEvent.type(aliceOption, '{Enter}');
+  expect(onSelect).toHaveBeenCalledWith({ label: 'Alice', value: 1 }, false);
+});
+
+test('syncs selected state when external value prop changes', () => {
+  const { rerender } = render(
+    <CompactSelectPanel
+      selects={SMALL_SELECTS}
+      value={{ label: 'Alice', value: 1 }}
+      onSelect={jest.fn()}
+    />,
+  );
+  expect(screen.getByText('Alice').closest('[role="option"]')).toHaveAttribute(
+    'aria-selected',
+    'true',
+  );
+
+  rerender(
+    <CompactSelectPanel
+      selects={SMALL_SELECTS}
+      value={undefined}
+      onSelect={jest.fn()}
+    />,
+  );
+  expect(screen.getByText('Alice').closest('[role="option"]')).toHaveAttribute(
+    'aria-selected',
+    'false',
+  );
+});

superset-frontend/src/components/ListView/Filters/CompactSelectPanel.tsx

@@ -0,0 +1,318 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import {
+  forwardRef,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+  useEffect,
+  type CSSProperties,
+  type RefObject,
+} from 'react';
+import { debounce } from 'lodash';
+import { t } from '@apache-superset/core/translation';
+import { useTheme, styled, css } from '@apache-superset/core/theme';
+import {
+  Icons,
+  Input,
+  Constants,
+  type InputRef,
+} from '@superset-ui/core/components';
+import type { SelectOption, ListViewFilter as Filter } from '../types';
+import type { FilterHandler } from './types';
+
+// Show search box when there are more than this many static options.
+const SEARCH_THRESHOLD = 6;
+
+// Page size for async select fetches — large enough to avoid most pagination
+// issues while still being a bounded request. Full infinite-load pagination
+// is a future improvement.
+const ASYNC_PAGE_SIZE = 200;
+
+interface CompactSelectPanelProps {
+  selects?: Filter['selects'];
+  fetchSelects?: Filter['fetchSelects'];
+  value?: SelectOption;
+  onSelect: (option: SelectOption | undefined, isClear?: boolean) => void;
+  onClose?: () => void;
+  isOpen?: boolean;
+  /** Forwarded from the filter config's popupStyle for per-filter width overrides */
+  panelStyle?: CSSProperties;
+  /** External loading state from filter config */
+  loading?: boolean;
+}
+
+const PanelContainer = styled.div<{ $panelStyle?: CSSProperties }>`
+  ${({ theme }) => css`
+    min-width: 220px;
+    max-width: 320px;
+    max-height: 320px;
+    display: flex;
+    flex-direction: column;
+    border-radius: ${theme.borderRadiusLG}px;
+    background: ${theme.colorBgElevated};
+    box-shadow: ${theme.boxShadowSecondary};
+    padding: 0 0 ${theme.paddingXXS}px;
+  `}
+`;
+
+const SearchRow = styled.div`
+  ${({ theme }) => css`
+    padding: ${theme.sizeUnit * 2}px ${theme.sizeUnit * 2}px
+      ${theme.paddingXXS}px;
+  `}
+`;
+
+const OptionList = styled.ul`
+  ${({ theme }) => css`
+    margin: 0;
+    padding: ${theme.paddingXXS}px 0;
+    overflow-y: auto;
+    flex: 1;
+    list-style: none;
+  `}
+`;
+
+const OptionItem = styled.li<{ $active: boolean }>`
+  ${({ theme, $active }) => css`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: ${(theme.controlHeight - theme.fontSize * theme.lineHeight) / 2}px
+      ${theme.controlPaddingHorizontal}px;
+    line-height: ${theme.lineHeight};
+    cursor: pointer;
+    font-size: ${theme.fontSize}px;
+    color: ${theme.colorText};
+    border-radius: ${theme.borderRadiusSM}px;
+    background: ${$active ? theme.colorPrimaryBg : 'transparent'};
+    transition: background 0.15s;
+
+    &:hover {
+      background: ${$active
+        ? theme.colorPrimaryBgHover
+        : theme.colorFillTertiary};
+      outline: 2px solid ${theme.colorPrimary};
+      outline-offset: -2px;
+    }
+  `}
+`;
+
+const OptionLabel = styled.span`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 240px;
+`;
+
+const StatusText = styled.div`
+  ${({ theme }) => css`
+    padding: ${theme.sizeUnit * 2}px ${theme.sizeUnit * 3}px;
+    text-align: center;
+    color: ${theme.colorTextDisabled};
+    font-size: ${theme.fontSizeSM}px;
+  `}
+`;
+
+function CompactSelectPanel(
+  {
+    selects = [],
+    fetchSelects,
+    value,
+    onSelect,
+    onClose,
+    isOpen,
+    loading: externalLoading,
+    panelStyle,
+  }: CompactSelectPanelProps,
+  ref: RefObject<FilterHandler>,
+) {
+  const theme = useTheme();
+  const inputRef = useRef<InputRef>(null);
+  const [search, setSearch] = useState('');
+  const [debouncedSearch, setDebouncedSearch] = useState('');
+  const [remoteOptions, setRemoteOptions] = useState<SelectOption[]>([]);
+  const [internalLoading, setInternalLoading] = useState(false);
+
+  const isLoading = externalLoading || internalLoading;
+
+  const debouncedSetSearch = useMemo(
+    () => debounce(setDebouncedSearch, Constants.FAST_DEBOUNCE),
+    [],
+  );
+
+  useEffect(
+    () => () => {
+      debouncedSetSearch.cancel();
+    },
+    [debouncedSetSearch],
+  );
+
+  // Focus search input when dropdown opens; reset search when it closes
+  useEffect(() => {
+    let timeoutId: ReturnType<typeof setTimeout>;
+    if (isOpen) {
+      timeoutId = setTimeout(() => {
+        inputRef.current?.input?.focus({ preventScroll: true });
+      }, 100);
+    } else {
+      setSearch('');
+      setDebouncedSearch('');
+    }
+    return () => {
+      if (timeoutId) clearTimeout(timeoutId);
+    };
+  }, [isOpen]);
+
+  // Fetch remote options when debounced search changes
+  useEffect(() => {
+    if (!fetchSelects) return;
+    let cancelled = false;
+    setInternalLoading(true);
+    fetchSelects(debouncedSearch, 0, ASYNC_PAGE_SIZE)
+      .then(result => {
+        if (!cancelled) setRemoteOptions(result?.data ?? []);
+      })
+      .catch(() => {
+        if (!cancelled) setRemoteOptions([]);
+      })
+      .finally(() => {
+        if (!cancelled) setInternalLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [debouncedSearch, fetchSelects]);
+
+  useImperativeHandle(ref, () => ({
+    clearFilter: () => {
+      setSearch('');
+      setDebouncedSearch('');
+      onSelect(undefined, true);
+    },
+  }));
+
+  const displayOptions = (
+    fetchSelects
+      ? remoteOptions
+      : selects.filter(o => {
+          const label = typeof o.label === 'string' ? o.label : String(o.value);
+          return label.toLowerCase().includes(search.toLowerCase());
+        })
+  ).filter(o => o != null);
+
+  const showSearch = !!fetchSelects || selects.length > SEARCH_THRESHOLD;
+
+  const handleSelect = (opt: SelectOption, displayText?: string) => {
+    const isDeselect = value?.value === opt.value;
+    // Normalize to a plain string label for URL serialization:
+    // 1. String labels pass through unchanged.
+    // 2. ReactNode labels with a `title` field use that (set by callers for
+    //    options like owner-select where label contains name + email JSX).
+    // 3. Fall back to DOM text content, then stringified value.
+    const label =
+      typeof opt.label === 'string'
+        ? opt.label
+        : (opt.title ?? displayText ?? String(opt.value ?? ''));
+    const next = isDeselect ? undefined : { label, value: opt.value };
+    onSelect(next, isDeselect);
+    onClose?.();
+  };
+
+  return (
+    <PanelContainer style={panelStyle}>
+      {showSearch && (
+        <SearchRow>
+          <Input
+            ref={inputRef}
+            prefix={
+              <Icons.SearchOutlined iconSize="l" iconColor={theme.colorIcon} />
+            }
+            placeholder={t('Search')}
+            value={search}
+            onChange={e => {
+              setSearch(e.target.value);
+              debouncedSetSearch(e.target.value);
+            }}
+            allowClear
+            css={css`
+              width: 100%;
+              box-shadow: none;
+            `}
+          />
+        </SearchRow>
+      )}
+      <OptionList role="listbox" aria-label={t('Filter options')}>
+        {isLoading ? (
+          <StatusText>{t('Loading...')}</StatusText>
+        ) : displayOptions.length === 0 ? (
+          <StatusText>{t('No results')}</StatusText>
+        ) : (
+          displayOptions.map((opt, i) => {
+            const isActive = value?.value === opt.value;
+            const getDisplayText = (el: HTMLElement) =>
+              el.textContent?.trim() || undefined;
+            const isFirst = i === 0;
+            const isLast = i === displayOptions.length - 1;
+            return (
+              <OptionItem
+                key={opt.value}
+                $active={isActive}
+                role="option"
+                aria-selected={isActive}
+                tabIndex={0}
+                onClick={e =>
+                  handleSelect(opt, getDisplayText(e.currentTarget))
+                }
+                onKeyDown={e => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    handleSelect(opt, getDisplayText(e.currentTarget));
+                  } else if (e.key === 'ArrowDown' && !isLast) {
+                    e.preventDefault();
+                    (
+                      e.currentTarget.nextElementSibling as HTMLElement | null
+                    )?.focus();
+                  } else if (e.key === 'ArrowUp' && !isFirst) {
+                    e.preventDefault();
+                    (
+                      e.currentTarget
+                        .previousElementSibling as HTMLElement | null
+                    )?.focus();
+                  }
+                }}
+              >
+                <OptionLabel>{opt.label}</OptionLabel>
+                {isActive && (
+                  <Icons.CheckOutlined
+                    iconSize="s"
+                    iconColor={theme.colorPrimary}
+                  />
+                )}
+              </OptionItem>
+            );
+          })
+        )}
+      </OptionList>
+    </PanelContainer>
+  );
+}
+
+export default forwardRef(CompactSelectPanel);

superset-frontend/src/components/ListView/Filters/FilterPopoverContent.test.tsx

@@ -0,0 +1,80 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { render, screen } from 'spec/helpers/testing-library';
+import userEvent from '@testing-library/user-event';
+import FilterPopoverContent from './FilterPopoverContent';
+
+beforeEach(() => {
+  jest.clearAllMocks();
+});
+
+test('renders children inside the wrapper', () => {
+  render(
+    <FilterPopoverContent>
+      <div data-test="inner-content">Inner content</div>
+    </FilterPopoverContent>,
+  );
+  expect(screen.getByTestId('inner-content')).toBeInTheDocument();
+});
+
+test('renders the Apply button', () => {
+  render(
+    <FilterPopoverContent>
+      <div>content</div>
+    </FilterPopoverContent>,
+  );
+  expect(screen.getByRole('button', { name: /apply/i })).toBeInTheDocument();
+});
+
+test('calls onClose when Apply button is clicked', async () => {
+  const onClose = jest.fn();
+  render(
+    <FilterPopoverContent onClose={onClose}>
+      <div>content</div>
+    </FilterPopoverContent>,
+  );
+  await userEvent.click(screen.getByRole('button', { name: /apply/i }));
+  expect(onClose).toHaveBeenCalledTimes(1);
+});
+
+test('renders without onClose and clicking Apply does not throw', async () => {
+  render(
+    <FilterPopoverContent>
+      <div>content</div>
+    </FilterPopoverContent>,
+  );
+  // No onClose prop — click should not throw
+  await userEvent.click(screen.getByRole('button', { name: /apply/i }));
+  expect(screen.getByRole('button', { name: /apply/i })).toBeInTheDocument();
+});
+
+test('visually hides label elements so pills remain accessible', () => {
+  render(
+    <FilterPopoverContent>
+      <label htmlFor="input">Date range</label>
+      <input id="input" />
+    </FilterPopoverContent>,
+  );
+  const label = screen.getByText('Date range');
+  // The label must be in the DOM for screen readers but visually hidden via CSS
+  expect(label).toBeInTheDocument();
+  const computedStyle = window.getComputedStyle(label);
+  // clip / overflow hidden pattern applied; position absolute is the key indicator
+  expect(computedStyle.position).toBe('absolute');
+});

superset-frontend/src/components/ListView/Filters/FilterPopoverContent.tsx

@@ -0,0 +1,71 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import type { ReactNode } from 'react';
+import { t } from '@apache-superset/core/translation';
+import { styled, css } from '@apache-superset/core/theme';
+import { Button } from '@superset-ui/core/components';
+
+interface FilterPopoverContentProps {
+  children: ReactNode;
+  onClose?: () => void;
+}
+
+const Wrapper = styled.div`
+  ${({ theme }) => css`
+    padding: ${theme.sizeUnit * 2}px;
+    display: flex;
+    flex-direction: column;
+    gap: ${theme.sizeUnit * 2}px;
+
+    /* Visually hide the redundant label — the pill already shows it, but keep it
+       accessible to screen readers so filter inputs have a named context. */
+    label {
+      position: absolute !important;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+  `}
+`;
+
+const Footer = styled.div`
+  display: flex;
+  justify-content: flex-end;
+`;
+
+export default function FilterPopoverContent({
+  children,
+  onClose,
+}: FilterPopoverContentProps) {
+  return (
+    <Wrapper>
+      {children}
+      <Footer>
+        <Button size="small" buttonStyle="primary" onClick={onClose}>
+          {t('Apply')}
+        </Button>
+      </Footer>
+    </Wrapper>
+  );
+}

superset-frontend/src/components/ListView/Filters/Select.test.tsx

@@ -16,11 +16,11 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { createRef } from 'react';
+import { createRef, act } from 'react';
 import {
   render,
   screen,
-  selectOption,
+  selectPillOption,
   waitFor,
 } from 'spec/helpers/testing-library';
 import { ListViewFilterOperator } from '../types';
@@ -79,7 +79,7 @@ test('select filter with ReactNode label uses option title when serializing sele
     />,
   );
 
-  await selectOption('John Doe', 'Owner');
+  await selectPillOption('John Doe', 'Owner');
 
   await waitFor(() => {
     expect(mockUpdateFilterValue).toHaveBeenCalledWith(0, {
@@ -120,7 +120,7 @@ test('select filter falls back to stringified value when no string label or titl
     />,
   );
 
-  await selectOption('123', 'Something');
+  await selectPillOption('123', 'Something');
 
   await waitFor(() => {
     expect(mockUpdateFilterValue).toHaveBeenCalledWith(0, {
@@ -156,7 +156,7 @@ test('plain select with string label passes label through unchanged', async () =
     />,
   );
 
-  await selectOption('Published', 'Status');
+  await selectPillOption('Published', 'Status');
 
   await waitFor(() => {
     expect(mockUpdateFilterValue).toHaveBeenCalledWith(0, {
@@ -197,7 +197,7 @@ test('plain select with ReactNode label uses option title when serializing selec
     />,
   );
 
-  await selectOption('Jane Roe', 'Owner');
+  await selectPillOption('Jane Roe', 'Owner');
 
   await waitFor(() => {
     expect(mockUpdateFilterValue).toHaveBeenCalledWith(0, {
@@ -224,16 +224,18 @@ test('clearFilter notifies onSelect with undefined and isClear=true', () => {
     />,
   );
 
-  ref.current?.clearFilter();
+  act(() => {
+    ref.current?.clearFilter();
+  });
 
   expect(mockOnSelect).toHaveBeenCalledWith(undefined, true);
 });
 
 test('rehydrates filter pill from initialValue with plain-string label', async () => {
-  // The user-visible regression: after URL/state rehydration the filter pill
-  // must render the human-readable name, not the numeric user id. The fix
-  // ensures the persisted label is a string; this test asserts that string
-  // is what surfaces in the rendered combobox selection.
+  // In the compact pill UI the rehydrated label is surfaced as the tooltip
+  // (visible on hover) rather than inline text. We verify the pill is in
+  // active state — the clear button is rendered — which confirms the
+  // SelectOption value object was correctly rehydrated.
   const filters = [
     {
       Header: 'Owner',
@@ -262,6 +264,6 @@ test('rehydrates filter pill from initialValue with plain-string label', async (
   );
 
   await waitFor(() => {
-    expect(screen.getByText('John Doe')).toBeInTheDocument();
+    expect(screen.getByTestId('compact-filter-clear')).toBeInTheDocument();
   });
 });

superset-frontend/src/components/ListView/Filters/index.test.tsx

@@ -97,7 +97,278 @@ test('search filter passes autoComplete prop correctly', () => {
   expect(input.autocomplete).toBe('new-password');
 });
 
-test('renders multiple search filters with different inputName values', () => {
+test('renders a compact pill trigger for select filters', () => {
+  const filters = [
+    {
+      Header: 'Owner',
+      key: 'owner',
+      id: 'owner',
+      input: 'select' as const,
+      operator: ListViewFilterOperator.RelationOneMany,
+      selects: [
+        { label: 'Alice', value: 1 },
+        { label: 'Bob', value: 2 },
+      ],
+    },
+  ];
+
+  render(
+    <UIFilters
+      filters={filters}
+      internalFilters={[]}
+      updateFilterValue={mockUpdateFilterValue}
+    />,
+  );
+
+  expect(screen.getByTestId('compact-filter-pill')).toBeInTheDocument();
+  expect(screen.getByText('Owner')).toBeInTheDocument();
+});
+
+test('select pill shows active state (clear button) when a value is selected', () => {
+  const filters = [
+    {
+      Header: 'Owner',
+      key: 'owner',
+      id: 'owner',
+      input: 'select' as const,
+      operator: ListViewFilterOperator.RelationOneMany,
+      selects: [{ label: 'Alice', value: 1 }],
+    },
+  ];
+
+  render(
+    <UIFilters
+      filters={filters}
+      internalFilters={[
+        {
+          id: 'owner',
+          operator: ListViewFilterOperator.RelationOneMany,
+          value: { label: 'Alice', value: 1 },
+        },
+      ]}
+      updateFilterValue={mockUpdateFilterValue}
+    />,
+  );
+
+  expect(
+    screen.getByRole('button', { name: /clear owner filter/i }),
+  ).toBeInTheDocument();
+});
+
+test('select pill tooltip falls back to static selects on cold URL load (no cached label)', () => {
+  const filters = [
+    {
+      Header: 'Owner',
+      key: 'owner',
+      id: 'owner',
+      input: 'select' as const,
+      operator: ListViewFilterOperator.RelationOneMany,
+      selects: [
+        { label: 'Alice', value: 1 },
+        { label: 'Bob', value: 2 },
+      ],
+    },
+  ];
+
+  // Simulate cold URL load: value has only numeric value, no label in cache
+  render(
+    <UIFilters
+      filters={filters}
+      internalFilters={[
+        {
+          id: 'owner',
+          operator: ListViewFilterOperator.RelationOneMany,
+          value: { value: 1 } as any,
+        },
+      ]}
+      updateFilterValue={mockUpdateFilterValue}
+    />,
+  );
+
+  // The pill should be active (clear button visible) and the static label
+  // should be resolved as the tooltip source
+  expect(
+    screen.getByRole('button', { name: /clear owner filter/i }),
+  ).toBeInTheDocument();
+});
+
+test('datetime_range filter renders as CompactFilterTrigger with dialog aria-haspopup', () => {
+  const filters = [
+    {
+      Header: 'Time range',
+      key: 'time_range',
+      id: 'time_range',
+      input: 'datetime_range' as const,
+      operator: ListViewFilterOperator.Between,
+    },
+  ];
+
+  render(
+    <UIFilters
+      filters={filters}
+      internalFilters={[]}
+      updateFilterValue={mockUpdateFilterValue}
+    />,
+  );
+
+  const pill = screen.getByTestId('compact-filter-pill');
+  expect(pill).toBeInTheDocument();
+  expect(pill).toHaveAttribute('aria-haspopup', 'dialog');
+  expect(screen.getByText('Time range')).toBeInTheDocument();
+});
+
+test('datetime_range pill shows active state when value is set', () => {
+  const filters = [
+    {
+      Header: 'Time range',
+      key: 'time_range',
+      id: 'time_range',
+      input: 'datetime_range' as const,
+      operator: ListViewFilterOperator.Between,
+    },
+  ];
+
+  render(
+    <UIFilters
+      filters={filters}
+      internalFilters={[
+        {
+          id: 'time_range',
+          operator: ListViewFilterOperator.Between,
+          value: ['2024-01-01', '2024-12-31'],
+        },
+      ]}
+      updateFilterValue={mockUpdateFilterValue}
+    />,
+  );
+
+  expect(
+    screen.getByRole('button', { name: /clear time range filter/i }),
+  ).toBeInTheDocument();
+});
+
+test('datetime_range tooltip formats unix timestamps as human-readable dates', () => {
+  const filters = [
+    {
+      Header: 'Time range',
+      key: 'time_range',
+      id: 'time_range',
+      input: 'datetime_range' as const,
+      operator: ListViewFilterOperator.Between,
+      dateFilterValueType: 'unix' as const,
+    },
+  ];
+
+  // Jan 1 2024 00:00:00 UTC in ms
+  const start = 1704067200000;
+  const end = 1735689599000;
+
+  const { container } = render(
+    <UIFilters
+      filters={filters}
+      internalFilters={[
+        {
+          id: 'time_range',
+          operator: ListViewFilterOperator.Between,
+          value: [start, end],
+        },
+      ]}
+      updateFilterValue={mockUpdateFilterValue}
+    />,
+  );
+
+  // Should NOT contain raw unix timestamp numbers in the rendered output
+  expect(container.textContent).not.toContain(String(start));
+  expect(container.textContent).not.toContain(String(end));
+});
+
+test('datetime_range tooltip leaves ISO strings as-is', () => {
+  const filters = [
+    {
+      Header: 'Time range',
+      key: 'time_range',
+      id: 'time_range',
+      input: 'datetime_range' as const,
+      operator: ListViewFilterOperator.Between,
+    },
+  ];
+
+  render(
+    <UIFilters
+      filters={filters}
+      internalFilters={[
+        {
+          id: 'time_range',
+          operator: ListViewFilterOperator.Between,
+          value: ['2024-01-01T00:00:00.000Z', '2024-12-31T23:59:59.000Z'],
+        },
+      ]}
+      updateFilterValue={mockUpdateFilterValue}
+    />,
+  );
+
+  // Pill is active (clear button present)
+  expect(
+    screen.getByRole('button', { name: /clear time range filter/i }),
+  ).toBeInTheDocument();
+});
+
+test('numerical_range filter renders as CompactFilterTrigger with dialog aria-haspopup', () => {
+  const filters = [
+    {
+      Header: 'Age range',
+      key: 'age_range',
+      id: 'age_range',
+      input: 'numerical_range' as const,
+      operator: ListViewFilterOperator.Between,
+    },
+  ];
+
+  render(
+    <UIFilters
+      filters={filters}
+      internalFilters={[]}
+      updateFilterValue={mockUpdateFilterValue}
+    />,
+  );
+
+  const pill = screen.getByTestId('compact-filter-pill');
+  expect(pill).toBeInTheDocument();
+  expect(pill).toHaveAttribute('aria-haspopup', 'dialog');
+  expect(screen.getByText('Age range')).toBeInTheDocument();
+});
+
+test('numerical_range pill shows active state when value is set', () => {
+  const filters = [
+    {
+      Header: 'Age range',
+      key: 'age_range',
+      id: 'age_range',
+      input: 'numerical_range' as const,
+      operator: ListViewFilterOperator.Between,
+    },
+  ];
+
+  render(
+    <UIFilters
+      filters={filters}
+      internalFilters={[
+        {
+          id: 'age_range',
+          operator: ListViewFilterOperator.Between,
+          value: [18, 65],
+        },
+      ]}
+      updateFilterValue={mockUpdateFilterValue}
+    />,
+  );
+
+  expect(
+    screen.getByRole('button', { name: /clear age range filter/i }),
+  ).toBeInTheDocument();
+});
+
+test('renders only the first search filter when multiple search filters are configured', () => {
   const filters = [
     {
       Header: 'Name',
@@ -125,8 +396,8 @@ test('renders multiple search filters with different inputName values', () => {
     />,
   );
 
+  // Only the first search filter renders — one search box per page
   const inputs = screen.getAllByTestId('filters-search') as HTMLInputElement[];
-  expect(inputs).toHaveLength(2);
+  expect(inputs).toHaveLength(1);
   expect(inputs[0].name).toBe('filter_name_search');
-  expect(inputs[1].name).toBe('description');
 });

superset-frontend/src/components/ListView/Filters/index.tsx

@@ -19,11 +19,14 @@
 import {
   createRef,
   forwardRef,
+  useCallback,
   useImperativeHandle,
   useMemo,
+  useState,
   RefObject,
 } from 'react';
 
+import { extendedDayjs } from '@superset-ui/core/utils/dates';
 import { withTheme } from '@apache-superset/core/theme';
 
 import type {
@@ -34,9 +37,11 @@ import type {
 } from '../types';
 import type { FilterHandler } from './types';
 import SearchFilter from './Search';
-import SelectFilter from './Select';
 import DateRangeFilter from './DateRange';
 import NumericalRangeFilter from './NumericalRange';
+import CompactFilterTrigger from './CompactFilterTrigger';
+import CompactSelectPanel from './CompactSelectPanel';
+import FilterPopoverContent from './FilterPopoverContent';
 
 interface UIFiltersProps {
   filters: Filters;
@@ -46,7 +51,10 @@ interface UIFiltersProps {
 
 function UIFilters(
   { filters, internalFilters = [], updateFilterValue }: UIFiltersProps,
-  ref: RefObject<{ clearFilters: () => void }>,
+  ref: RefObject<{
+    clearFilters: () => void;
+    clearFilterById: (id: string) => void;
+  }>,
 ) {
   const filterRefs = useMemo(
     () =>
@@ -54,20 +62,51 @@ function UIFilters(
     [filters.length],
   );
 
+  // Cache display labels for select filters so tooltip works after URL round-trip
+  // (URL serialization strips the label, leaving only the value).
+  const [tooltipLabels, setTooltipLabels] = useState<Record<number, string>>(
+    {},
+  );
+
+  const clearFilterAtIndex = useCallback(
+    (index: number) => {
+      filterRefs[index]?.current?.clearFilter?.();
+      updateFilterValue(index, undefined);
+      setTooltipLabels(prev => {
+        const next = { ...prev };
+        delete next[index];
+        return next;
+      });
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [updateFilterValue],
+  );
+
   useImperativeHandle(ref, () => ({
     clearFilters: () => {
-      filterRefs.forEach((filter: any) => {
-        filter.current?.clearFilter?.();
+      filterRefs.forEach((_, index) => {
+        filterRefs[index]?.current?.clearFilter?.();
+        updateFilterValue(index, undefined);
       });
+      setTooltipLabels({});
     },
     clearFilterById: (id: string) => {
       const index = filters.findIndex(f => f.id === id);
       if (index >= 0) {
-        filterRefs[index]?.current?.clearFilter?.();
+        clearFilterAtIndex(index);
       }
     },
   }));
 
+  // Only the first search filter renders inline; subsequent ones are skipped
+  // to keep one search box per page (multi-field search pages like Users would
+  // otherwise show several input boxes in the header).
+  // NOTE: This means secondary search fields (e.g. Email/Username on Users,
+  // Group Key on RLS) are not currently accessible via the filter bar. Those
+  // pages previously relied on multiple inline inputs. This is a known UX
+  // trade-off — revisit if admin workflows require additional search fields.
+  let searchFilterRendered = false;
+
   return (
     <>
       {filters.map(
@@ -78,8 +117,6 @@ function UIFilters(
             key,
             id,
             input,
-            optionFilterProps,
-            paginate,
             selects,
             toolTipDescription,
             onFilterUpdate,
@@ -87,44 +124,72 @@ function UIFilters(
             dateFilterValueType,
             min,
             max,
-            popupStyle,
             autoComplete,
             inputName,
+            popupStyle,
           },
           index,
         ) => {
           const initialValue = internalFilters?.[index]?.value;
           if (input === 'select') {
+            const selectValue = initialValue as SelectOption | undefined;
+            // Prefer cached label (survives URL round-trips where only the value
+            // is preserved). Fall back to the static selects list for cold loads.
+            const cachedLabel = tooltipLabels[index];
+            const staticFallback = cachedLabel
+              ? undefined
+              : selects?.find(s => s.value === selectValue?.value)?.label;
+            const tooltipTitle = !!selectValue
+              ? cachedLabel ||
+                (typeof staticFallback === 'string'
+                  ? staticFallback
+                  : undefined)
+              : undefined;
             return (
-              <SelectFilter
-                ref={filterRefs[index]}
-                Header={Header}
-                fetchSelects={fetchSelects}
-                initialValue={initialValue}
-                key={key}
-                name={id}
-                onSelect={(
-                  option: SelectOption | undefined,
-                  isClear?: boolean,
-                ) => {
-                  if (onFilterUpdate) {
-                    // Filter change triggers both onChange AND onClear, only want to track onChange
-                    if (!isClear) {
-                      onFilterUpdate(option);
-                    }
-                  }
-
-                  updateFilterValue(index, option);
-                }}
-                optionFilterProps={optionFilterProps}
-                paginate={paginate}
-                selects={selects}
-                loading={loading ?? false}
-                dropdownStyle={popupStyle}
-              />
+              <span key={key} data-test="select-filter-container">
+                <CompactFilterTrigger
+                  label={Header}
+                  hasValue={!!selectValue}
+                  tooltipTitle={tooltipTitle}
+                  onClear={() => clearFilterAtIndex(index)}
+                >
+                  {({ isOpen, onClose }) => (
+                    <CompactSelectPanel
+                      ref={filterRefs[index]}
+                      selects={selects}
+                      fetchSelects={fetchSelects}
+                      value={initialValue as SelectOption | undefined}
+                      loading={loading ?? false}
+                      isOpen={isOpen}
+                      onClose={onClose}
+                      panelStyle={popupStyle}
+                      onSelect={(
+                        option: SelectOption | undefined,
+                        isClear?: boolean,
+                      ) => {
+                        if (option && !isClear) {
+                          setTooltipLabels(prev => ({
+                            ...prev,
+                            [index]:
+                              typeof option.label === 'string'
+                                ? option.label
+                                : String(option.value ?? ''),
+                          }));
+                        }
+                        if (onFilterUpdate && !isClear) {
+                          onFilterUpdate(option);
+                        }
+                        updateFilterValue(index, option);
+                      }}
+                    />
+                  )}
+                </CompactFilterTrigger>
+              </span>
             );
           }
           if (input === 'search' && typeof Header === 'string') {
+            if (searchFilterRendered) return null;
+            searchFilterRendered = true;
             return (
               <SearchFilter
                 ref={filterRefs[index]}
@@ -145,30 +210,81 @@ function UIFilters(
             );
           }
           if (input === 'datetime_range') {
+            const hasDateValue =
+              Array.isArray(initialValue) && initialValue.some(Boolean);
+            const dateTooltip = hasDateValue
+              ? (initialValue as (string | number)[])
+                  .filter(Boolean)
+                  .map(v => {
+                    if (typeof v === 'number') {
+                      // unix milliseconds → human-readable date
+                      return extendedDayjs(v).format('MMM D, YYYY HH:mm');
+                    }
+                    // ISO string — already readable
+                    return String(v);
+                  })
+                  .join(' – ')
+              : undefined;
             return (
-              <DateRangeFilter
-                ref={filterRefs[index]}
-                Header={Header}
-                initialValue={initialValue}
+              <CompactFilterTrigger
                 key={key}
-                name={id}
-                onSubmit={value => updateFilterValue(index, value)}
-                dateFilterValueType={dateFilterValueType || 'unix'}
-              />
+                label={Header}
+                hasValue={hasDateValue}
+                tooltipTitle={dateTooltip}
+                popupType="dialog"
+                onClear={() => {
+                  filterRefs[index]?.current?.clearFilter?.();
+                }}
+              >
+                {({ onClose }) => (
+                  <FilterPopoverContent onClose={onClose}>
+                    <DateRangeFilter
+                      ref={filterRefs[index]}
+                      Header={Header}
+                      initialValue={initialValue}
+                      name={id}
+                      onSubmit={value => updateFilterValue(index, value)}
+                      dateFilterValueType={dateFilterValueType || 'unix'}
+                    />
+                  </FilterPopoverContent>
+                )}
+              </CompactFilterTrigger>
             );
           }
           if (input === 'numerical_range') {
+            const hasRangeValue =
+              Array.isArray(initialValue) &&
+              initialValue.some(v => v !== null && v !== undefined);
+            const rangeTooltip = hasRangeValue
+              ? (initialValue as (number | null | undefined)[])
+                  .filter(v => v !== null && v !== undefined)
+                  .join(' – ')
+              : undefined;
             return (
-              <NumericalRangeFilter
-                ref={filterRefs[index]}
-                Header={Header}
-                initialValue={initialValue}
-                min={min}
-                max={max}
+              <CompactFilterTrigger
                 key={key}
-                name={id}
-                onSubmit={value => updateFilterValue(index, value)}
-              />
+                label={Header}
+                hasValue={hasRangeValue}
+                tooltipTitle={rangeTooltip}
+                popupType="dialog"
+                onClear={() => {
+                  filterRefs[index]?.current?.clearFilter?.();
+                }}
+              >
+                {({ onClose }) => (
+                  <FilterPopoverContent onClose={onClose}>
+                    <NumericalRangeFilter
+                      ref={filterRefs[index]}
+                      Header={Header}
+                      initialValue={initialValue}
+                      min={min}
+                      max={max}
+                      name={id}
+                      onSubmit={value => updateFilterValue(index, value)}
+                    />
+                  </FilterPopoverContent>
+                )}
+              </CompactFilterTrigger>
             );
           }
           return null;

superset-frontend/src/components/ListView/ListView.test.tsx

@@ -301,15 +301,19 @@ describe('ListView', () => {
   });
 
   test('renders UI filters', () => {
-    const filterControls = screen.getAllByRole('combobox');
-    expect(filterControls).toHaveLength(2);
+    // select and datetime_range filters render as compact pill buttons;
+    // search filter renders as a text input
+    const filterPills = screen.getAllByTestId('compact-filter-pill');
+    expect(filterPills).toHaveLength(3); // ID, Age, Time
   });
 
   test('calls fetchData on filter', async () => {
-    // Handle select filter
-    const selectFilter = screen.getAllByRole('combobox')[0];
-    await userEvent.click(selectFilter);
-    const option = screen.getByText('foo');
+    // Click the ID compact pill to open its option panel
+    const idPill = screen.getByRole('button', { name: 'ID' });
+    await userEvent.click(idPill);
+
+    // Wait for and click the 'foo' option in the dropdown panel
+    const option = await screen.findByRole('option', { name: 'foo' });
     await userEvent.click(option);
 
     // Handle search filter
@@ -341,7 +345,10 @@ describe('ListView', () => {
       initialSort: [{ id: 'something' }],
     });
 
-    const sortSelect = screen.getByTestId('card-sort-select');
+    const sortSelectContainer = screen.getByTestId('card-sort-select');
+    const sortSelect = sortSelectContainer.querySelector(
+      '[data-test="compact-filter-pill"]',
+    ) as HTMLElement;
     await userEvent.click(sortSelect);
 
     const sortOption = screen.getByText('Alphabetical');

superset-frontend/src/components/ListView/ListView.tsx

@@ -65,13 +65,30 @@ const ListViewStyles = styled.div`
 
       .header {
         display: flex;
+        align-items: center;
         padding-bottom: ${theme.sizeUnit * 4}px;
 
         & .controls {
           display: flex;
           flex-wrap: wrap;
-          column-gap: ${theme.sizeUnit * 7}px;
-          row-gap: ${theme.sizeUnit * 4}px;
+          align-items: center;
+          column-gap: ${theme.sizeUnit * 2}px;
+          row-gap: ${theme.sizeUnit * 2}px;
+
+          [data-test='search-filter-container'] {
+            width: ${theme.sizeUnit * 44}px;
+            flex-shrink: 0;
+            height: ${theme.controlHeight}px;
+            justify-content: center;
+
+            label {
+              display: none;
+            }
+
+            .ant-input-affix-wrapper {
+              width: 100%;
+            }
+          }
         }
       }
 
@@ -167,7 +184,6 @@ const bulkSelectColumnConfig = {
 const ViewModeContainer = styled.div`
   ${({ theme }) => `
     padding-right: ${theme.sizeUnit * 4}px;
-    margin-top: ${theme.sizeUnit * 5 + 1}px;
     white-space: nowrap;
     display: inline-block;
 
@@ -192,6 +208,29 @@ const ViewModeContainer = styled.div`
   `}
 `;
 
+const ClearAllButton = styled.button`
+  ${({ theme }) => `
+    background: none;
+    border: none;
+    padding: 0 ${theme.sizeUnit}px;
+    color: ${theme.colorPrimary};
+    font-size: ${theme.fontSizeSM}px;
+    cursor: pointer;
+    white-space: nowrap;
+    line-height: ${theme.controlHeight}px;
+
+    &:hover:not(:disabled) {
+      color: ${theme.colorPrimaryHover};
+      text-decoration: underline;
+    }
+
+    &:disabled {
+      color: ${theme.colorTextDisabled};
+      cursor: not-allowed;
+    }
+  `}
+`;
+
 const EmptyWrapper = styled.div`
   ${({ theme }) => `
     padding: ${theme.sizeUnit * 40}px 0;
@@ -356,6 +395,14 @@ export function ListView<T extends object = any>({
     clearFilterById: (id: string) => void;
   }>(null);
 
+  const hasActiveFilters = internalFilters.some(f => {
+    if (f.value === null || f.value === undefined || f.value === '')
+      return false;
+    if (Array.isArray(f.value))
+      return f.value.some(v => v !== null && v !== undefined && v !== '');
+    return true;
+  });
+
   // Wire the optional external filtersRef to our internal filterControlsRef.
   // useLayoutEffect fires synchronously after DOM mutations, guaranteeing the
   // ref is populated before the first paint and after every update.
@@ -421,6 +468,21 @@ export function ListView<T extends object = any>({
                 options={cardSortSelectOptions}
               />
             )}
+            {filterable && (
+              <Tooltip
+                title={!hasActiveFilters ? t('No filters applied') : undefined}
+              >
+                <span>
+                  <ClearAllButton
+                    type="button"
+                    disabled={!hasActiveFilters}
+                    onClick={() => filterControlsRef.current?.clearFilters()}
+                  >
+                    {t('Clear all')}
+                  </ClearAllButton>
+                </span>
+              </Tooltip>
+            )}
           </div>
         </div>
         <div className={`body ${rows.length === 0 ? 'empty' : ''} `}>

superset-frontend/src/pages/ChartList/ChartList.test.tsx

@@ -57,9 +57,12 @@ const mockUser = {
 const findFilterByLabel = (labelText: string) => {
   const containers = screen.getAllByTestId('select-filter-container');
   for (const container of containers) {
-    const label = container.querySelector('label');
-    if (label?.textContent === labelText) {
-      return container.querySelector('[role="combobox"], .ant-select');
+    // Compact pill filters show the label as button text
+    const pill = container.querySelector(
+      '[data-test="compact-filter-pill"]',
+    ) as HTMLElement | null;
+    if (pill && pill.textContent?.includes(labelText)) {
+      return pill;
     }
   }
   return null;

superset-frontend/src/pages/DashboardList/DashboardList.cardview.test.tsx

@@ -156,18 +156,16 @@ describe('DashboardList Card View Tests', () => {
       ).toBeInTheDocument();
     });
 
-    // Find the sort select by its testId, then the combobox within it
+    // Find the sort select by its testId, then the pill button within it
     const sortContainer = screen.getByTestId('card-sort-select');
-    const sortCombobox = within(sortContainer).getByRole('combobox');
-    await userEvent.click(sortCombobox);
+    // eslint-disable-next-line testing-library/no-node-access
+    const sortPill = sortContainer.querySelector(
+      '[data-test="compact-filter-pill"]',
+    ) as HTMLElement;
+    await userEvent.click(sortPill);
 
     // Select "Alphabetical" from the dropdown
-    const alphabeticalOption = await waitFor(() =>
-      within(
-        // eslint-disable-next-line testing-library/no-node-access
-        document.querySelector('.rc-virtual-list')!,
-      ).getByText('Alphabetical'),
-    );
+    const alphabeticalOption = await screen.findByText('Alphabetical');
     await userEvent.click(alphabeticalOption);
 
     await waitFor(() => {

superset-frontend/src/pages/DashboardList/DashboardList.test.tsx

@@ -20,7 +20,7 @@ import fetchMock from 'fetch-mock';
 import { isFeatureEnabled } from '@superset-ui/core';
 import {
   screen,
-  selectOption,
+  selectPillOption,
   waitFor,
   fireEvent,
 } from 'spec/helpers/testing-library';
@@ -200,7 +200,7 @@ test('selecting Status filter encodes published=true in API call', async () => {
     ).toBeInTheDocument();
   });
 
-  await selectOption('Published', 'Status');
+  await selectPillOption('Published', 'Status');
 
   await waitFor(() => {
     const latest = getLatestDashboardApiCall();
@@ -242,7 +242,7 @@ test('selecting Owner filter encodes rel_m_m owner in API call', async () => {
     ).toBeInTheDocument();
   });
 
-  await selectOption('Admin User', 'Owner');
+  await selectPillOption('Admin User', 'Owner');
 
   await waitFor(() => {
     const latest = getLatestDashboardApiCall();
@@ -287,7 +287,7 @@ test('selecting Modified by filter encodes rel_o_m changed_by in API call', asyn
     ).toBeInTheDocument();
   });
 
-  await selectOption('Admin User', 'Modified by');
+  await selectPillOption('Admin User', 'Modified by');
 
   await waitFor(() => {
     const latest = getLatestDashboardApiCall();

superset-frontend/src/pages/DatasetList/DatasetList.integration.test.tsx

@@ -20,7 +20,7 @@ import { act, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import fetchMock from 'fetch-mock';
 import rison from 'rison';
-import { selectOption } from 'spec/helpers/testing-library';
+import { selectPillOption } from 'spec/helpers/testing-library';
 import {
   setupMocks,
   renderDatasetList,
@@ -102,11 +102,11 @@ test('ListView provider correctly merges filter + sort + pagination state on ref
     ).toBeGreaterThan(callsBeforeSort);
   });
 
-  // 2. Apply a filter using selectOption helper
+  // 2. Apply a filter using selectPillOption helper (compact pill UI)
   const beforeFilterCallCount = fetchMock.callHistory.calls(
     API_ENDPOINTS.DATASOURCE_COMBINED,
   ).length;
-  await selectOption('Virtual', 'Type');
+  await selectPillOption('Virtual', 'Type');
 
   // Wait for filter API call to complete
   await waitFor(() => {

superset-frontend/src/pages/DatasetList/DatasetList.listview.test.tsx

@@ -27,7 +27,7 @@ import userEvent from '@testing-library/user-event';
 import fetchMock from 'fetch-mock';
 import rison from 'rison';
 import { SupersetClient } from '@superset-ui/core';
-import { selectOption } from 'spec/helpers/testing-library';
+import { selectPillOption } from 'spec/helpers/testing-library';
 import {
   setupMocks,
   renderDatasetList,
@@ -1510,11 +1510,8 @@ test('bulk selection clears when filter changes', async () => {
     API_ENDPOINTS.DATASOURCE_COMBINED,
   ).length;
 
-  // Wait for filter combobox to be ready before applying filter
-  await screen.findByRole('combobox', { name: 'Type' });
-
-  // Apply a filter using selectOption helper
-  await selectOption('Virtual', 'Type');
+  // Apply a filter using selectPillOption helper (compact pill UI)
+  await selectPillOption('Virtual', 'Type');
 
   // Wait for filter API call to complete
   await waitFor(() => {
@@ -1556,16 +1553,13 @@ test('type filter API call includes correct filter parameter', async () => {
     expect(screen.getByTestId('listview-table')).toBeInTheDocument();
   });
 
-  // Wait for Type filter combobox
-  await screen.findByRole('combobox', { name: 'Type' });
-
   // Snapshot call count before filter
   const callsBeforeFilter = fetchMock.callHistory.calls(
     API_ENDPOINTS.DATASOURCE_COMBINED,
   ).length;
 
-  // Apply Type filter
-  await selectOption('Virtual', 'Type');
+  // Apply Type filter using compact pill UI
+  await selectPillOption('Virtual', 'Type');
 
   // Wait for filter API call to complete
   await waitFor(() => {
@@ -1606,16 +1600,13 @@ test('type filter persists after duplicating a dataset', async () => {
     expect(screen.getByTestId('listview-table')).toBeInTheDocument();
   });
 
-  // Wait for Type filter combobox
-  await screen.findByRole('combobox', { name: 'Type' });
-
   // Snapshot call count before filter
   const callsBeforeFilter = fetchMock.callHistory.calls(
     API_ENDPOINTS.DATASOURCE_COMBINED,
   ).length;
 
-  // Apply Type filter
-  await selectOption('Virtual', 'Type');
+  // Apply Type filter using compact pill UI
+  await selectPillOption('Virtual', 'Type');
 
   // Wait for filter API call to complete
   await waitFor(() => {

superset-frontend/src/pages/DatasetList/DatasetList.test.tsx

@@ -200,8 +200,8 @@ test('renders Name search filter', async () => {
 test('renders Type filter (Virtual/Physical dropdown)', async () => {
   renderDatasetList(mockAdminUser);
 
-  // Filter dropdowns should be present
-  const filters = await screen.findAllByRole('combobox');
+  // Filter pills should be present (compact pill UI)
+  const filters = await screen.findAllByTestId('compact-filter-pill');
   expect(filters.length).toBeGreaterThan(0);
 });
 
@@ -445,7 +445,8 @@ test('selecting Database filter triggers API call with database relation filter'
 
   await waitForDatasetsPageReady();
 
-  const filtersContainers = screen.getAllByRole('combobox');
+  // Filter pills should be present (compact pill UI replaces comboboxes)
+  const filtersContainers = screen.getAllByTestId('compact-filter-pill');
   expect(filtersContainers.length).toBeGreaterThan(0);
 });
 

superset-frontend/src/pages/GroupsList/GroupsList.test.tsx

@@ -121,13 +121,17 @@ describe('GroupsList', () => {
 
   test('renders the filters correctly', async () => {
     await renderComponent();
-    const filtersSelect = screen.getAllByTestId('filters-select')[0];
 
-    expect(within(filtersSelect).getByText(/name/i)).toBeInTheDocument();
-    expect(within(filtersSelect).getByText(/label/i)).toBeInTheDocument();
-    expect(within(filtersSelect).getByText(/description/i)).toBeInTheDocument();
-    expect(within(filtersSelect).getByText(/roles/i)).toBeInTheDocument();
-    expect(within(filtersSelect).getByText(/users/i)).toBeInTheDocument();
+    // The compact filter UI renders the first search filter as an input,
+    // and select filters as pill buttons. Only "Name" search renders inline;
+    // "Label" and "Description" searches are hidden (one search box per page).
+    expect(screen.getByTestId('filters-search')).toBeInTheDocument();
+
+    // Select filters render as compact pill buttons
+    const pills = screen.getAllByTestId('compact-filter-pill');
+    const pillLabels = pills.map(p => p.textContent ?? '');
+    expect(pillLabels.some(l => /roles/i.test(l))).toBe(true);
+    expect(pillLabels.some(l => /users/i.test(l))).toBe(true);
   });
 
   test('renders correct columns in the table', async () => {

superset-frontend/src/pages/RolesList/RolesList.test.tsx

@@ -151,8 +151,11 @@ describe('RolesList', () => {
   test('renders filters options', async () => {
     await renderAndWait();
 
-    const typeFilter = screen.queryAllByTestId('filters-select');
-    expect(typeFilter).toHaveLength(4);
+    // Compact filter UI: one search input for "Name" and 3 select pills
+    // (Users, Permissions, Groups).
+    expect(screen.getByTestId('filters-search')).toBeInTheDocument();
+    const selectContainers = screen.getAllByTestId('select-filter-container');
+    expect(selectContainers).toHaveLength(3);
   });
 
   test('renders correct list columns', async () => {

superset-frontend/src/pages/RowLevelSecurityList/RowLevelSecurityList.test.tsx

@@ -166,11 +166,14 @@ describe('RuleList RTL', () => {
   test('renders filter options', async () => {
     await renderAndWait();
 
+    // Compact filter UI: only the first search filter renders (Name),
+    // subsequent search filters (Group Key) are hidden — one search box per page.
     const searchFilters = screen.queryAllByTestId('filters-search');
-    expect(searchFilters).toHaveLength(2);
+    expect(searchFilters).toHaveLength(1);
 
-    const typeFilter = screen.queryAllByTestId('filters-select');
-    expect(typeFilter).toHaveLength(3); // Update to expect 3 select filters
+    // Select filters render as compact pill buttons (Filter Type, Modified by)
+    const selectContainers = screen.queryAllByTestId('select-filter-container');
+    expect(selectContainers).toHaveLength(2);
   });
 
   test('renders correct list columns', async () => {

superset-frontend/src/pages/UsersList/UsersList.test.tsx

@@ -138,16 +138,16 @@ describe('UsersList', () => {
   test('renders filters options', async () => {
     await renderAndWait();
 
-    const submenu = screen.queryAllByTestId('filters-select')[0];
-    expect(within(submenu).getByText(/first name/i)).toBeInTheDocument();
-    expect(within(submenu).getByText(/last name/i)).toBeInTheDocument();
-    expect(within(submenu).getByText(/email/i)).toBeInTheDocument();
-    expect(within(submenu).getByText(/username/i)).toBeInTheDocument();
-    expect(within(submenu).getByText(/roles/i)).toBeInTheDocument();
-    expect(within(submenu).getByText(/is active?/i)).toBeInTheDocument();
-    expect(within(submenu).getByText(/created on/i)).toBeInTheDocument();
-    expect(within(submenu).getByText(/changed on/i)).toBeInTheDocument();
-    expect(within(submenu).getByText(/last login/i)).toBeInTheDocument();
+    // The compact filter UI shows: only the first search filter as an input,
+    // and select/datetime filters as pill buttons. Only "First name" search
+    // renders (subsequent search filters are hidden — one search box per page).
+    expect(screen.getByTestId('filters-search')).toBeInTheDocument();
+
+    // Select and datetime filters render as compact pill buttons
+    const pills = screen.getAllByTestId('compact-filter-pill');
+    const pillLabels = pills.map(p => p.textContent ?? '');
+    expect(pillLabels.some(l => /roles/i.test(l))).toBe(true);
+    expect(pillLabels.some(l => /is active\?/i.test(l))).toBe(true);
   });
 
   test('renders correct list columns', async () => {