[WC-2882] Use text input for number filter

packages/pluggableWidgets/datagrid-number-filter-web/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+- We fixed an issue with number filter not working in some locales
+
 ## [2.9.1] - 2025-03-20
 
 ### Fixed

packages/pluggableWidgets/datagrid-number-filter-web/src/DatagridNumberFilter.editorPreview.tsx

@@ -27,7 +27,6 @@ function Preview(props: DatagridNumberFilterPreviewProps): ReactElement {
             screenReaderButtonCaption={props.screenReaderButtonCaption}
             screenReaderInputCaption={props.screenReaderInputCaption}
             styles={parseStyle(props.style)}
-            type="text"
         />
     );
 }

packages/pluggableWidgets/datagrid-number-filter-web/src/components/NumberFilterContainer.tsx

@@ -69,7 +69,6 @@ function Container(props: ContainerProps): React.ReactElement {
             screenReaderInputCaption={props.screenReaderInputCaption?.value}
             styles={props.style}
             tabIndex={props.tabIndex}
-            type="number"
         />
     );
 }

packages/pluggableWidgets/datagrid-number-filter-web/src/components/__tests__/DatagridNumberFilter.spec.tsx

@@ -93,7 +93,7 @@ describe("Number Filter", () => {
                 render(<DatagridNumberFilter {...commonProps} onChange={action} valueAttribute={attribute} />);
 
                 const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
-                await user.type(screen.getByRole("spinbutton"), "10");
+                await user.type(screen.getByRole("textbox"), "10");
 
                 act(() => {
                     jest.runOnlyPendingTimers();
@@ -108,8 +108,8 @@ describe("Number Filter", () => {
                 const { getByRole } = render(<DatagridNumberFilter {...commonProps} valueAttribute={attribute} />);
 
                 // First set a value
-                const input = getByRole("spinbutton");
-                expect(input).toHaveValue(null);
+                const input = getByRole("textbox");
+                expect(input).toHaveValue("");
 
                 const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
                 await user.type(input, "42");
@@ -127,31 +127,31 @@ describe("Number Filter", () => {
                     plugin.emit("datagrid1", "reset.value", false);
                 });
 
-                expect(input).toHaveValue(null);
+                expect(input).toHaveValue("");
                 expect(attribute.setValue).toHaveBeenLastCalledWith(undefined);
             });
 
             describe("with defaultValue", () => {
                 it("initializes with defaultValue", () => {
                     render(<DatagridNumberFilter {...commonProps} defaultValue={dynamicValue<Big>(new Big(100))} />);
-                    expect(screen.getByRole("spinbutton")).toHaveValue(100);
+                    expect(screen.getByRole("textbox")).toHaveValue("100");
                 });
 
                 it("do not sync value and defaultValue when defaultValue changes from undefined to number", () => {
                     const { rerender } = render(<DatagridNumberFilter {...commonProps} defaultValue={undefined} />);
-                    expect(screen.getByRole("spinbutton")).toHaveValue(null);
+                    expect(screen.getByRole("textbox")).toHaveValue("");
                     rerender(<DatagridNumberFilter {...commonProps} defaultValue={dynamicValue<Big>(new Big(100))} />);
-                    expect(screen.getByRole("spinbutton")).toHaveValue(null);
+                    expect(screen.getByRole("textbox")).toHaveValue("");
                 });
 
                 it("do not sync value and defaultValue when defaultValue changes from number to undefined", async () => {
                     const { rerender } = render(
                         <DatagridNumberFilter {...commonProps} defaultValue={dynamicValue<Big>(new Big(100))} />
                     );
-                    expect(screen.getByRole("spinbutton")).toHaveValue(100);
+                    expect(screen.getByRole("textbox")).toHaveValue("100");
                     rerender(<DatagridNumberFilter {...commonProps} defaultValue={undefined} />);
                     await waitFor(() => {
-                        expect(screen.getByRole("spinbutton")).toHaveValue(100);
+                        expect(screen.getByRole("textbox")).toHaveValue("100");
                     });
                 });
 
@@ -162,8 +162,8 @@ describe("Number Filter", () => {
                         <DatagridNumberFilter {...commonProps} valueAttribute={attribute} defaultValue={value} />
                     );
 
-                    const input = getByRole("spinbutton");
-                    expect(input).toHaveValue(123);
+                    const input = getByRole("textbox");
+                    expect(input).toHaveValue("123");
 
                     const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
                     // set input empty
@@ -182,7 +182,7 @@ describe("Number Filter", () => {
                         plugin.emit("datagrid1", "reset.value", true);
                     });
 
-                    expect(input).toHaveValue(123);
+                    expect(input).toHaveValue("123");
                     expect(attribute.setValue).toHaveBeenLastCalledWith(Big(123));
                 });
             });
@@ -241,8 +241,8 @@ describe("Number Filter", () => {
                 const attribute = new EditableValueBuilder<Big>().build();
                 const { getByRole } = render(<DatagridNumberFilter {...commonProps} valueAttribute={attribute} />);
 
-                const input = getByRole("spinbutton");
-                expect(input).toHaveValue(null);
+                const input = getByRole("textbox");
+                expect(input).toHaveValue("");
 
                 const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
                 await user.type(input, "42");
@@ -258,16 +258,16 @@ describe("Number Filter", () => {
                     plugin.emit("datagrid1", "reset.value", false);
                 });
 
-                expect(input).toHaveValue(null);
+                expect(input).toHaveValue("");
                 expect(attribute.setValue).toHaveBeenLastCalledWith(undefined);
             });
 
             it("set value when external set value event is triggered", async () => {
                 const attribute = new EditableValueBuilder<Big>().build();
                 const { getByRole } = render(<DatagridNumberFilter {...commonProps} valueAttribute={attribute} />);
 
-                const input = getByRole("spinbutton");
-                expect(input).toHaveValue(null);
+                const input = getByRole("textbox");
+                expect(input).toHaveValue("");
 
                 const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
                 await user.type(input, "42");
@@ -285,7 +285,7 @@ describe("Number Filter", () => {
                     });
                 });
 
-                expect(input).toHaveValue(100);
+                expect(input).toHaveValue("100");
                 expect(attribute.setValue).toHaveBeenLastCalledWith(Big(100));
             });
 

packages/pluggableWidgets/datagrid-number-filter-web/src/components/__tests__/__snapshots__/DatagridNumberFilter.spec.tsx.snap

@@ -36,7 +36,7 @@ exports[`Number Filter with single instance with multiple attributes renders cor
     </div>
     <input
       class="form-control filter-input"
-      type="number"
+      type="text"
       value=""
     />
   </div>
@@ -89,7 +89,7 @@ exports[`Number Filter with single instance with single attribute renders correc
     </div>
     <input
       class="form-control filter-input"
-      type="number"
+      type="text"
       value=""
     />
   </div>

packages/pluggableWidgets/datagrid-text-filter-web/src/DatagridTextFilter.editorPreview.tsx

@@ -29,7 +29,6 @@ function Preview(props: DatagridTextFilterPreviewProps): ReactElement {
             screenReaderButtonCaption={props.screenReaderButtonCaption}
             screenReaderInputCaption={props.screenReaderInputCaption}
             styles={parseStyle(props.style)}
-            type="text"
         />
     );
 }

packages/pluggableWidgets/datagrid-text-filter-web/src/components/TextFilterContainer.tsx

@@ -74,7 +74,6 @@ export const TextFilterContainer: (props: ContainerProps) => React.ReactElement
                 screenReaderInputCaption={props.screenReaderInputCaption?.value}
                 styles={props.style}
                 tabIndex={props.tabIndex}
-                type="text"
                 defaultValue={props.defaultValue?.value}
             />
         );

packages/pluggableWidgets/datagrid-web/e2e/filtering/DataGridFilteringIntegration.spec.js

@@ -26,8 +26,7 @@ test("datagrid-web filtering integration", async ({ page }) => {
     await page.getByRole("columnheader", { name: "First name" }).getByRole("textbox").click();
     await expect(await rows()).toHaveCount(14);
 
-    await page.getByRole("spinbutton").fill("1995");
-    //await select("Birth year").fill("1995");
+    await page.getByRole("columnheader", { name: "Birth year" }).getByRole("textbox").fill("1995");
     await expect(await rows()).toHaveCount(9);
 
     await page.getByRole("columnheader", { name: "Color (enum)" }).getByRole("combobox").click();

packages/shared/widget-plugin-filtering/src/controllers/input/NumberInputController.ts

@@ -88,7 +88,9 @@ export class NumberFilterController {
         disposers.push(
             autorun(() => {
                 this.input1.setValue(this.filter.arg1.displayValue);
+                this.input1.setIsValid(this.filter.arg1.isValid);
                 this.input2.setValue(this.filter.arg2.displayValue);
+                this.input2.setIsValid(this.filter.arg2.isValid);
             })
         );
 

packages/shared/widget-plugin-filtering/src/controls/input/InputWithFilters.tsx

@@ -11,7 +11,7 @@ export function InputWithFiltersComponent<Fn extends AllFunctions>(props: InputC
     } = props;
     return (
         <div
-            className={classNames("filter-container", props.className)}
+            className={classNames("filter-container", props.className, { "has-error": !input1.isValid })}
             data-focusindex={props.tabIndex ?? 0}
             style={props.styles}
         >
@@ -24,14 +24,15 @@ export function InputWithFiltersComponent<Fn extends AllFunctions>(props: InputC
                 />
             )}
             <input
+                aria-invalid={input1.isValid ? undefined : true}
                 aria-label={props.screenReaderInputCaption}
                 className={classNames("form-control", { "filter-input": props.adjustable })}
                 disabled={props.disableInputs}
                 onChange={input1.onChange}
                 placeholder={props.placeholder}
                 ref={props.inputRef}
-                type={props.type}
                 value={input1.value}
+                type="text"
             />
         </div>
     );

packages/shared/widget-plugin-filtering/src/controls/input/typings.ts

@@ -12,7 +12,6 @@ export interface BaseProps {
     screenReaderInputCaption?: string;
     styles?: React.CSSProperties;
     tabIndex?: number;
-    type: "text" | "number";
     badge?: string;
 }
 

packages/shared/widget-plugin-filtering/src/stores/input/InputStore.ts

@@ -2,12 +2,14 @@ import { makeObservable, observable, action } from "mobx";
 
 export class InputStore {
     value: string;
+    isValid = true;
 
     constructor(init = "") {
         this.value = init;
 
         makeObservable(this, {
             value: observable,
+            isValid: observable,
             setValue: action,
             onChange: action
         });
@@ -17,6 +19,10 @@ export class InputStore {
         this.value = value;
     }
 
+    setIsValid(value: boolean): void {
+        this.isValid = value;
+    }
+
     onChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
         this.setValue(event.target.value);
     };