[WC-2882] Use text input for number filter (9.24)

packages/modules/data-widgets/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@mendix/data-widgets",
     "moduleName": "Data Widgets",
-    "version": "2.27.3",
+    "version": "2.27.4",
     "license": "Apache-2.0",
     "copyright": "© Mendix Technology BV 2023. All rights reserved.",
     "private": true,

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.8.5] - 2024-11-13
 
 ### Changed

packages/pluggableWidgets/datagrid-number-filter-web/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@mendix/datagrid-number-filter-web",
     "widgetName": "DatagridNumberFilter",
-    "version": "2.9.0",
+    "version": "2.9.1",
     "description": "",
     "copyright": "© Mendix Technology BV 2023. All rights reserved.",
     "private": true,

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

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

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

@@ -90,7 +90,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();
@@ -105,8 +105,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");
@@ -124,31 +124,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");
                     });
                 });
 
@@ -159,8 +159,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
@@ -179,7 +179,7 @@ describe("Number Filter", () => {
                         plugin.emit("datagrid1", "reset.value", true);
                     });
 
-                    expect(input).toHaveValue(123);
+                    expect(input).toHaveValue("123");
                     expect(attribute.setValue).toHaveBeenLastCalledWith(Big(123));
                 });
             });
@@ -238,8 +238,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");
@@ -255,16 +255,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");
@@ -282,7 +282,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-number-filter-web/src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="DatagridNumberFilter" version="2.9.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="DatagridNumberFilter" version="2.9.1" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="DatagridNumberFilter.xml" />
         </widgetFiles>

packages/shared/widget-plugin-filtering/src/controllers/NumberFilterController.ts

@@ -85,7 +85,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

@@ -12,7 +12,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}
         >
@@ -25,6 +25,7 @@ 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}

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

@@ -2,13 +2,16 @@ 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,
+            setIsValid: action,
             onChange: action
         });
     }
@@ -17,6 +20,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);
     };