fix: use text input for number filter, type=number messes up with number parsing

Author: r0b1n

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

@@ -6,164 +6,168 @@ 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
 
--   We fixed an issue where non-adjustable default filters were overridden by personalization settings.
+- We fixed an issue where non-adjustable default filters were overridden by personalization settings.
 
 ## [2.8.4] - 2024-11-13
 
 ### Changed
 
--   We improved type mismatch filter error message.
+- We improved type mismatch filter error message.
 
 ### Fixed
 
--   We fixed an issue where onChange wouldn't triggered on empty or not empty filter.
+- We fixed an issue where onChange wouldn't triggered on empty or not empty filter.
 
 ### Breaking changes
 
--   We improved accessibility for the filter type select button - the select menu shows on enter, space, and arrow keys.
+- We improved accessibility for the filter type select button - the select menu shows on enter, space, and arrow keys.
 
 ### Added
 
--   We improved screen reader integration.
+- We improved screen reader integration.
 
 ## [2.8.3] - 2024-10-31
 
 ### Fixed
 
--   We fixed an issue with grid wide filters not resetting.
+- We fixed an issue with grid wide filters not resetting.
 
 ## [2.8.2] - 2024-10-14
 
 ### Fixed
 
--   We fixed an issue where filters wouldn't reset.
+- We fixed an issue where filters wouldn't reset.
 
 ## [2.8.1] - 2024-09-23
 
 ### Changed
 
--   Widget maintenance.
+- Widget maintenance.
 
 ## [2.8.0] - 2024-09-20
 
 ### Breaking changes
 
--   We removed "Group key" property.
+- We removed "Group key" property.
 
 ## [2.7.0] - 2024-09-13
 
 ### Changed
 
--   Improved integration with parent widgets.
+- Improved integration with parent widgets.
 
 ### Added
 
--   Group key -- a new setting to associate the filter with the group (see "Filter groups" in docs for more information).
+- Group key -- a new setting to associate the filter with the group (see "Filter groups" in docs for more information).
 
 ## [2.6.1] - 2024-08-15
 
 ### Fixed
 
--   We fixed an issue with the filter unexpectedly focusing when combined with conditional visibility.
+- We fixed an issue with the filter unexpectedly focusing when combined with conditional visibility.
 
 ## [2.6.0] - 2024-06-19
 
 ### Added
 
--   A new hook that subscribes the widget to `Set_Filter` action.
+- A new hook that subscribes the widget to `Set_Filter` action.
 
 ### Changed
 
--   We update event listener for `Reset_Filter` to allow reset to default value.
+- We update event listener for `Reset_Filter` to allow reset to default value.
 
 ## [2.5.1] - 2024-04-30
 
 ### Fixed
 
--   We resolved an issue where the default value was not working in certain cases.
+- We resolved an issue where the default value was not working in certain cases.
 
 ## [2.5.0] - 2024-03-27
 
 ### Added
 
--   A new hook that subscribes the widget to external events.
+- A new hook that subscribes the widget to external events.
 
 ## [2.4.3] - 2023-10-13
 
 ### Fixed
 
--   We removed redundant code to improve widget load time in the browser.
+- We removed redundant code to improve widget load time in the browser.
 
 ## [2.4.2] - 2023-06-21
 
 ### Fixed
 
--   We fixed issue with initial filter condition.
+- We fixed issue with initial filter condition.
 
 ## [2.4.1] - 2023-05-26
 
 ### Changed
 
--   We updated the light and dark icons and tiles for the widget.
+- We updated the light and dark icons and tiles for the widget.
 
--   We changed colors in the structure mode preview for dark and light modes.
+- We changed colors in the structure mode preview for dark and light modes.
 
 ## [2.4.0] - 2023-05-01
 
 ### Fixed
 
--   We fixed an issue with widget rendering and performance.
+- We fixed an issue with widget rendering and performance.
 
 ### Breaking changes
 
--   We introduce a breaking change that affects how widget is reacting on default value changes. Starting with this version, widget use the default value attribute only as an initial value, and any further changes to the default value attribute will be ignored.
+- We introduce a breaking change that affects how widget is reacting on default value changes. Starting with this version, widget use the default value attribute only as an initial value, and any further changes to the default value attribute will be ignored.
 
 ## [2.3.1] - 2022-08-11
 
 ### Fixed
 
--   We fixed an issue with sync of widget defaultValue property and current filter value (#151789)
+- We fixed an issue with sync of widget defaultValue property and current filter value (#151789)
 
 ## [2.3.0] - 2022-05-11
 
 ### Added
 
--   We added the options to filter for empty and non-empty values.
+- We added the options to filter for empty and non-empty values.
 
 ## [2.2.0] - 2021-12-23
 
 ### Added
 
--   We added dark mode to Structure mode preview.
+- We added dark mode to Structure mode preview.
 
--   We added dark icons for Tile and List view.
+- We added dark icons for Tile and List view.
 
 ## [2.0.2] - 2021-10-13
 
 ### Added
 
--   We added the possibility to store the filter value in an attribute and trigger an onChange event on every filter change.
+- We added the possibility to store the filter value in an attribute and trigger an onChange event on every filter change.
 
--   We added a "Enable advanced options" toggle for Studio users.
+- We added a "Enable advanced options" toggle for Studio users.
 
 ## [2.0.1] - 2021-10-07
 
 ### Fixed
 
--   We fixed an issue where widgets get duplicate identifiers assigned under certain circumstances which causes inconsistencies in accessibility.
+- We fixed an issue where widgets get duplicate identifiers assigned under certain circumstances which causes inconsistencies in accessibility.
 
 ## [2.0.0] - 2021-09-28
 
 ### Added
 
--   We added the possibility to reuse the filter with Gallery.
+- We added the possibility to reuse the filter with Gallery.
 
--   We added a toolbox category and toolbox tile image for Studio & Studio Pro.
+- We added a toolbox category and toolbox tile image for Studio & Studio Pro.
 
 ### Changed
 
--   We renamed the widget to Number filter.
+- We renamed the widget to Number filter.

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/shared/widget-plugin-filtering/src/controls/input/InputWithFilters.tsx

@@ -30,8 +30,8 @@ export function InputWithFiltersComponent<Fn extends AllFunctions>(props: InputC
                 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;
 }