This is an automated email from the ASF dual-hosted git repository.
yousoph pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new df8bbb548a3 fix(native-filters): keep filter value input caret at
inline start (#42323)
df8bbb548a3 is described below
commit df8bbb548a301753714f96e8017e87fab2c61383
Author: yousoph <[email protected]>
AuthorDate: Thu Jul 23 11:26:56 2026 -0700
fix(native-filters): keep filter value input caret at inline start (#42323)
Co-authored-by: Claude Opus 4.8 <[email protected]>
---
.../src/chartCustomizations/components/common.ts | 7 ++++
.../src/filters/components/common.test.tsx | 37 ++++++++++++++++++++++
superset-frontend/src/filters/components/common.ts | 7 ++++
3 files changed, 51 insertions(+)
diff --git a/superset-frontend/src/chartCustomizations/components/common.ts
b/superset-frontend/src/chartCustomizations/components/common.ts
index 01725ccb18e..b848cb29653 100644
--- a/superset-frontend/src/chartCustomizations/components/common.ts
+++ b/superset-frontend/src/chartCustomizations/components/common.ts
@@ -25,6 +25,13 @@ export const RESPONSIVE_WIDTH = 0;
export const FilterPluginStyle = styled.div<PluginFilterStylesProps>`
min-height: ${({ height }) => height}px;
width: ${({ width }) => (width === RESPONSIVE_WIDTH ? '100%' :
`${width}px`)};
+ /* Filter value controls (Input / InputNumber / the Select search field) */
+ /* resolve 'text-align' by inheritance. Pin the wrapper to the inline start
*/
+ /* so the caret and typed text stay at the inline-start edge even when a */
+ /* centered 'text-align' is inherited from an ancestor (e.g. a host-app */
+ /* theme or css-in-js override). 'start' is the CSS default, so this is a */
+ /* no-op unless a centered value is inherited, and it is RTL-safe. */
+ text-align: start;
`;
export const StyledFormItem = styled(FormItem)`
diff --git a/superset-frontend/src/filters/components/common.test.tsx
b/superset-frontend/src/filters/components/common.test.tsx
new file mode 100644
index 00000000000..5a2a59cf0cb
--- /dev/null
+++ b/superset-frontend/src/filters/components/common.test.tsx
@@ -0,0 +1,37 @@
+/**
+ * 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 } from 'spec/helpers/testing-library';
+
+import { FilterPluginStyle } from 'src/filters/components/common';
+import { FilterPluginStyle as ChartCustomizationsFilterPluginStyle } from
'src/chartCustomizations/components/common';
+
+test('FilterPluginStyle pins the filter value control wrapper to the inline
start', () => {
+ // Keeps the caret and typed text at the inline-start edge even when a
+ // centered `text-align` is inherited from an ancestor. Guards against
+ // regressing the wrapper-level rule back to a centered/absent value.
+ const { container } = render(<FilterPluginStyle height={100} width={100} />);
+ expect(container.firstChild).toHaveStyleRule('text-align', 'start');
+});
+
+test('chartCustomizations FilterPluginStyle stays in sync with the
inline-start rule', () => {
+ const { container } = render(
+ <ChartCustomizationsFilterPluginStyle height={100} width={100} />,
+ );
+ expect(container.firstChild).toHaveStyleRule('text-align', 'start');
+});
diff --git a/superset-frontend/src/filters/components/common.ts
b/superset-frontend/src/filters/components/common.ts
index 01725ccb18e..b848cb29653 100644
--- a/superset-frontend/src/filters/components/common.ts
+++ b/superset-frontend/src/filters/components/common.ts
@@ -25,6 +25,13 @@ export const RESPONSIVE_WIDTH = 0;
export const FilterPluginStyle = styled.div<PluginFilterStylesProps>`
min-height: ${({ height }) => height}px;
width: ${({ width }) => (width === RESPONSIVE_WIDTH ? '100%' :
`${width}px`)};
+ /* Filter value controls (Input / InputNumber / the Select search field) */
+ /* resolve 'text-align' by inheritance. Pin the wrapper to the inline start
*/
+ /* so the caret and typed text stay at the inline-start edge even when a */
+ /* centered 'text-align' is inherited from an ancestor (e.g. a host-app */
+ /* theme or css-in-js override). 'start' is the CSS default, so this is a */
+ /* no-op unless a centered value is inherited, and it is RTL-safe. */
+ text-align: start;
`;
export const StyledFormItem = styled(FormItem)`
