From 3bda48cd4c72cf40f10cac0ac6d15b338b64edcd Mon Sep 17 00:00:00 2001 From: yousoph Date: Mon, 20 Jul 2026 20:22:36 +0000 Subject: [PATCH] fix(native-filters): keep filter value input caret left-aligned After the Ant Design v6 upgrade, the placeholder, value and search caret in a native filter bar Select value control render centered instead of at the start of the field (reported and confirmed in Firefox devtools on a multiple Select filter, light and dark themes). Root cause is antd v6 itself: it injects a rule targeting .ant-select-content directly for multiple-mode Selects (:where(.cssHash).ant-select-multiple .ant-select-content, specificity 0,2,0) that sets text-align: center. The Select search input lives inside .ant-select-content and inherits that alignment, so the caret and typed text sit in the middle. Because antd targets .ant-select-content directly, a text-align inherited from an ancestor wrapper cannot override it. Override the element itself, scoped to the filter value wrapper: .ant-select .ant-select-content under the FilterPluginStyle class resolves to specificity 0,3,0, beating antds 0,2,0 without !important. text-align: start keeps it RTL-safe. The wrapper also keeps text-align: start for the Input/InputNumber value controls (is-like text filter, numeric range) which resolve alignment by inheritance. Co-Authored-By: Claude Opus 4.8 --- .../src/filters/components/common.ts | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/superset-frontend/src/filters/components/common.ts b/superset-frontend/src/filters/components/common.ts index 01725ccb18e2..32e7a279d654 100644 --- a/superset-frontend/src/filters/components/common.ts +++ b/superset-frontend/src/filters/components/common.ts @@ -25,6 +25,22 @@ export const RESPONSIVE_WIDTH = 0; export const FilterPluginStyle = styled.div` min-height: ${({ height }) => height}px; width: ${({ width }) => (width === RESPONSIVE_WIDTH ? '100%' : `${width}px`)}; + /* Input / InputNumber filter value controls resolve text-align by */ + /* inheritance, so pin them to the inline start to keep the caret and typed */ + /* text at the left edge. */ + text-align: start; + + /* antd v6 sets 'text-align: center' directly on '.ant-select-content' for */ + /* multiple-mode Selects (its selector '.ant-select-multiple */ + /* .ant-select-content' has specificity 0,2,0). The Select search input */ + /* lives inside '.ant-select-content' and inherits that value, so the caret */ + /* and typed text render centered. A value inherited from this wrapper */ + /* cannot beat a rule that targets '.ant-select-content' directly, so */ + /* override the element itself: this wrapper class plus the two antd classes */ + /* give specificity 0,3,0, which wins without !important. RTL-safe. */ + .ant-select .ant-select-content { + text-align: start; + } `; export const StyledFormItem = styled(FormItem)`