From b13a6f633efd7cd671f1a1bed93f61133a0b9792 Mon Sep 17 00:00:00 2001
From: Yordan Stoyanov <yordan.stoyanov@mendix.com>
Date: Fri, 3 Apr 2026 14:49:50 +0200
Subject: [PATCH 1/2] fix: prevent focus jump when selecting empty or not empty
 in filter controls

---
 .../datagrid-number-filter-web/CHANGELOG.md   |  1 +
 .../datagrid-text-filter-web/CHANGELOG.md     |  1 +
 .../__tests__/DatagridTextFilter.spec.tsx     | 13 +++
 .../DatagridTextFilter.spec.tsx.snap          |  6 +-
 .../__tests__/NumberInputController.spec.ts   | 85 +++++++++++++++++++
 .../__tests__/StringInputController.spec.ts   | 85 +++++++++++++++++++
 .../input/NumberInputController.ts            |  1 +
 .../input/StringInputController.ts            |  1 +
 8 files changed, 190 insertions(+), 3 deletions(-)
 create mode 100644 packages/shared/widget-plugin-filtering/src/__tests__/NumberInputController.spec.ts
 create mode 100644 packages/shared/widget-plugin-filtering/src/__tests__/StringInputController.spec.ts

diff --git a/packages/pluggableWidgets/datagrid-number-filter-web/CHANGELOG.md b/packages/pluggableWidgets/datagrid-number-filter-web/CHANGELOG.md
index 28c4810ba2..7eba1b081e 100644
--- a/packages/pluggableWidgets/datagrid-number-filter-web/CHANGELOG.md
+++ b/packages/pluggableWidgets/datagrid-number-filter-web/CHANGELOG.md
@@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Fixed
 
 - We fixed an issue with filter selector dropdown not choosing the best placement on small viewports.
+- We fixed an issue where selecting Empty or Not empty could cause keyboard focus to jump away from the filter controls.
 
 ## [3.9.0] - 2026-03-23
 
diff --git a/packages/pluggableWidgets/datagrid-text-filter-web/CHANGELOG.md b/packages/pluggableWidgets/datagrid-text-filter-web/CHANGELOG.md
index 3855586f78..e591e04c14 100644
--- a/packages/pluggableWidgets/datagrid-text-filter-web/CHANGELOG.md
+++ b/packages/pluggableWidgets/datagrid-text-filter-web/CHANGELOG.md
@@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Fixed
 
 - We fixed an issue with filter selector dropdown not choosing the best placement on small viewports.
+- We fixed an issue where selecting Empty or Not empty could cause keyboard focus to jump away from the filter controls.
 
 ## [3.8.1] - 2026-02-19
 
diff --git a/packages/pluggableWidgets/datagrid-text-filter-web/src/components/__tests__/DatagridTextFilter.spec.tsx b/packages/pluggableWidgets/datagrid-text-filter-web/src/components/__tests__/DatagridTextFilter.spec.tsx
index 07e9eda2eb..86a1df7e0f 100644
--- a/packages/pluggableWidgets/datagrid-text-filter-web/src/components/__tests__/DatagridTextFilter.spec.tsx
+++ b/packages/pluggableWidgets/datagrid-text-filter-web/src/components/__tests__/DatagridTextFilter.spec.tsx
@@ -237,6 +237,19 @@ describe("Text Filter", () => {
                 expect(attribute.setValue).toHaveBeenLastCalledWith(undefined);
             });
 
+            it("keeps focus in filter controls when empty operator is selected", async () => {
+                render(<DatagridTextFilter {...commonProps} />);
+
+                const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+                const triggerButton = screen.getByRole("combobox", { name: "Equal" });
+
+                await user.click(triggerButton);
+                await user.click(screen.getByRole("option", { name: "Empty" }));
+
+                expect(screen.getByRole("textbox")).toBeDisabled();
+                expect(document.body).not.toHaveFocus();
+            });
+
             afterAll(() => {
                 (window as any)["com.mendix.widgets.web.filterable.filterContext.v2"] = undefined;
             });
diff --git a/packages/pluggableWidgets/datagrid-text-filter-web/src/components/__tests__/__snapshots__/DatagridTextFilter.spec.tsx.snap b/packages/pluggableWidgets/datagrid-text-filter-web/src/components/__tests__/__snapshots__/DatagridTextFilter.spec.tsx.snap
index 50588890cb..30aaec487e 100644
--- a/packages/pluggableWidgets/datagrid-text-filter-web/src/components/__tests__/__snapshots__/DatagridTextFilter.spec.tsx.snap
+++ b/packages/pluggableWidgets/datagrid-text-filter-web/src/components/__tests__/__snapshots__/DatagridTextFilter.spec.tsx.snap
@@ -14,12 +14,12 @@ exports[`Text Filter with single instance with multiple attributes renders corre
       >
         <button
           aria-activedescendant=""
-          aria-controls="downshift-:r8:-menu"
+          aria-controls="downshift-:r9:-menu"
           aria-expanded="false"
           aria-haspopup="listbox"
           aria-label="Equal"
           class="btn btn-default filter-selector-button button-icon equal"
-          id="downshift-:r8:-toggle-button"
+          id="downshift-:r9:-toggle-button"
           role="combobox"
           tabindex="0"
         >
@@ -28,7 +28,7 @@ exports[`Text Filter with single instance with multiple attributes renders corre
         <ul
           aria-label="Select filter type"
           class="filter-selectors hidden"
-          id="downshift-:r8:-menu"
+          id="downshift-:r9:-menu"
           role="listbox"
           style="position: fixed; left: 0px; top: 0px; transform: translate(0px, 0px);"
         />
diff --git a/packages/shared/widget-plugin-filtering/src/__tests__/NumberInputController.spec.ts b/packages/shared/widget-plugin-filtering/src/__tests__/NumberInputController.spec.ts
new file mode 100644
index 0000000000..2b18c15c5b
--- /dev/null
+++ b/packages/shared/widget-plugin-filtering/src/__tests__/NumberInputController.spec.ts
@@ -0,0 +1,85 @@
+import { describe, expect, it, jest } from "@jest/globals";
+import { NumberFilterController } from "../controllers/input/NumberInputController";
+import { Number_InputFilterInterface } from "../typings/InputFilterInterface";
+
+describe("NumberFilterController", () => {
+    function createFilter(): Number_InputFilterInterface {
+        return {
+            storeType: "input",
+            filterFunction: "equal",
+            defaultState: ["equal"],
+            arg1: {
+                type: "number",
+                value: undefined,
+                displayValue: "42",
+                isValid: true
+            },
+            arg2: {
+                type: "number",
+                value: undefined,
+                displayValue: "",
+                isValid: true
+            },
+            reset: jest.fn(),
+            clear: jest.fn(),
+            UNSAFE_overwriteFilterFunction: jest.fn(),
+            UNSAFE_setDefaults: jest.fn()
+        };
+    }
+
+    it("focuses input for value-based operators", () => {
+        const controller = new NumberFilterController({
+            filter: createFilter(),
+            defaultFilter: "equal",
+            adjustableFilterFunction: true
+        });
+
+        const focus = jest.fn();
+        Object.defineProperty(controller.inputRef, "current", {
+            value: { focus },
+            writable: true
+        });
+
+        controller.handleFilterFnChange("greater");
+
+        expect(focus).toHaveBeenCalledTimes(1);
+    });
+
+    it("does not focus input and clears value for empty", () => {
+        const controller = new NumberFilterController({
+            filter: createFilter(),
+            defaultFilter: "equal",
+            adjustableFilterFunction: true
+        });
+
+        const focus = jest.fn();
+        Object.defineProperty(controller.inputRef, "current", {
+            value: { focus },
+            writable: true
+        });
+
+        controller.handleFilterFnChange("empty");
+
+        expect(controller.input1.value).toBe("");
+        expect(focus).not.toHaveBeenCalled();
+    });
+
+    it("does not focus input and clears value for notEmpty", () => {
+        const controller = new NumberFilterController({
+            filter: createFilter(),
+            defaultFilter: "equal",
+            adjustableFilterFunction: true
+        });
+
+        const focus = jest.fn();
+        Object.defineProperty(controller.inputRef, "current", {
+            value: { focus },
+            writable: true
+        });
+
+        controller.handleFilterFnChange("notEmpty");
+
+        expect(controller.input1.value).toBe("");
+        expect(focus).not.toHaveBeenCalled();
+    });
+});
diff --git a/packages/shared/widget-plugin-filtering/src/__tests__/StringInputController.spec.ts b/packages/shared/widget-plugin-filtering/src/__tests__/StringInputController.spec.ts
new file mode 100644
index 0000000000..17019a135a
--- /dev/null
+++ b/packages/shared/widget-plugin-filtering/src/__tests__/StringInputController.spec.ts
@@ -0,0 +1,85 @@
+import { describe, expect, it, jest } from "@jest/globals";
+import { StringFilterController } from "../controllers/input/StringInputController";
+import { String_InputFilterInterface } from "../typings/InputFilterInterface";
+
+describe("StringFilterController", () => {
+    function createFilter(): String_InputFilterInterface {
+        return {
+            storeType: "input",
+            filterFunction: "equal",
+            defaultState: ["equal"],
+            arg1: {
+                type: "string",
+                value: undefined,
+                displayValue: "initial",
+                isValid: true
+            },
+            arg2: {
+                type: "string",
+                value: undefined,
+                displayValue: "",
+                isValid: true
+            },
+            reset: jest.fn(),
+            clear: jest.fn(),
+            UNSAFE_overwriteFilterFunction: jest.fn(),
+            UNSAFE_setDefaults: jest.fn()
+        };
+    }
+
+    it("focuses input for value-based operators", () => {
+        const controller = new StringFilterController({
+            filter: createFilter(),
+            defaultFilter: "equal",
+            adjustableFilterFunction: true
+        });
+
+        const focus = jest.fn();
+        Object.defineProperty(controller.inputRef, "current", {
+            value: { focus },
+            writable: true
+        });
+
+        controller.handleFilterFnChange("contains");
+
+        expect(focus).toHaveBeenCalledTimes(1);
+    });
+
+    it("does not focus input and clears value for empty", () => {
+        const controller = new StringFilterController({
+            filter: createFilter(),
+            defaultFilter: "equal",
+            adjustableFilterFunction: true
+        });
+
+        const focus = jest.fn();
+        Object.defineProperty(controller.inputRef, "current", {
+            value: { focus },
+            writable: true
+        });
+
+        controller.handleFilterFnChange("empty");
+
+        expect(controller.input1.value).toBe("");
+        expect(focus).not.toHaveBeenCalled();
+    });
+
+    it("does not focus input and clears value for notEmpty", () => {
+        const controller = new StringFilterController({
+            filter: createFilter(),
+            defaultFilter: "equal",
+            adjustableFilterFunction: true
+        });
+
+        const focus = jest.fn();
+        Object.defineProperty(controller.inputRef, "current", {
+            value: { focus },
+            writable: true
+        });
+
+        controller.handleFilterFnChange("notEmpty");
+
+        expect(controller.input1.value).toBe("");
+        expect(focus).not.toHaveBeenCalled();
+    });
+});
diff --git a/packages/shared/widget-plugin-filtering/src/controllers/input/NumberInputController.ts b/packages/shared/widget-plugin-filtering/src/controllers/input/NumberInputController.ts
index f57a3d14b4..f37037d681 100644
--- a/packages/shared/widget-plugin-filtering/src/controllers/input/NumberInputController.ts
+++ b/packages/shared/widget-plugin-filtering/src/controllers/input/NumberInputController.ts
@@ -63,6 +63,7 @@ export class NumberFilterController {
         this.filter.filterFunction = fn;
         if (fn === "empty" || fn === "notEmpty") {
             this.input1.setValue("");
+            return;
         }
         this.inputRef.current?.focus();
     };
diff --git a/packages/shared/widget-plugin-filtering/src/controllers/input/StringInputController.ts b/packages/shared/widget-plugin-filtering/src/controllers/input/StringInputController.ts
index 135dc5bf6b..402a6516d7 100644
--- a/packages/shared/widget-plugin-filtering/src/controllers/input/StringInputController.ts
+++ b/packages/shared/widget-plugin-filtering/src/controllers/input/StringInputController.ts
@@ -68,6 +68,7 @@ export class StringFilterController {
         this.filter.filterFunction = fn;
         if (fn === "empty" || fn === "notEmpty") {
             this.input1.setValue("");
+            return;
         }
         this.inputRef.current?.focus();
     };

From f3f681fc7e300ee1cbff4505380127f197667b25 Mon Sep 17 00:00:00 2001
From: Yordan Stoyanov <yordan.stoyanov@mendix.com>
Date: Fri, 3 Apr 2026 15:12:07 +0200
Subject: [PATCH 2/2] fix: reorganize imports in DatagridNumberFilter and
 DatagridTextFilter test files

---
 .../__tests__/DatagridNumberFilter.spec.tsx    | 18 ++++++++----------
 .../__tests__/DatagridTextFilter.spec.tsx      |  4 ++--
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/packages/pluggableWidgets/datagrid-number-filter-web/src/components/__tests__/DatagridNumberFilter.spec.tsx b/packages/pluggableWidgets/datagrid-number-filter-web/src/components/__tests__/DatagridNumberFilter.spec.tsx
index a8d8259b93..49162749d0 100644
--- a/packages/pluggableWidgets/datagrid-number-filter-web/src/components/__tests__/DatagridNumberFilter.spec.tsx
+++ b/packages/pluggableWidgets/datagrid-number-filter-web/src/components/__tests__/DatagridNumberFilter.spec.tsx
@@ -1,9 +1,14 @@
+import "@testing-library/jest-dom";
+import { act, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Big } from "big.js";
+import { resetIdCounter } from "downshift";
+import { AttributeMetaData } from "mendix";
+import { createContext } from "react";
 import { requirePlugin } from "@mendix/widget-plugin-external-events/plugin";
 import { FilterAPI } from "@mendix/widget-plugin-filtering/context";
+import { NumberInputFilterStore } from "@mendix/widget-plugin-filtering/stores/input/NumberInputFilterStore";
 import { ObservableFilterHost } from "@mendix/widget-plugin-filtering/typings/ObservableFilterHost";
-import "@testing-library/jest-dom";
-import { AttributeMetaData } from "mendix";
-
 import {
     actionValue,
     dynamic,
@@ -11,13 +16,6 @@ import {
     EditableValueBuilder,
     ListAttributeValueBuilder
 } from "@mendix/widget-plugin-test-utils";
-import { act, render, screen, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { createContext } from "react";
-
-import { NumberInputFilterStore } from "@mendix/widget-plugin-filtering/stores/input/NumberInputFilterStore";
-import { Big } from "big.js";
-import { resetIdCounter } from "downshift";
 import { DatagridNumberFilterContainerProps } from "../../../typings/DatagridNumberFilterProps";
 import DatagridNumberFilter from "../../DatagridNumberFilter";
 
diff --git a/packages/pluggableWidgets/datagrid-text-filter-web/src/components/__tests__/DatagridTextFilter.spec.tsx b/packages/pluggableWidgets/datagrid-text-filter-web/src/components/__tests__/DatagridTextFilter.spec.tsx
index 86a1df7e0f..a35183e18d 100644
--- a/packages/pluggableWidgets/datagrid-text-filter-web/src/components/__tests__/DatagridTextFilter.spec.tsx
+++ b/packages/pluggableWidgets/datagrid-text-filter-web/src/components/__tests__/DatagridTextFilter.spec.tsx
@@ -1,5 +1,3 @@
-import { FilterAPI } from "@mendix/widget-plugin-filtering/context";
-import { ObservableFilterHost } from "@mendix/widget-plugin-filtering/typings/ObservableFilterHost";
 import "@testing-library/jest-dom";
 
 import { act, render, screen } from "@testing-library/react";
@@ -8,7 +6,9 @@ import { resetIdCounter } from "downshift";
 import { AttributeMetaData } from "mendix";
 import { createContext } from "react";
 import { requirePlugin } from "@mendix/widget-plugin-external-events/plugin";
+import { FilterAPI } from "@mendix/widget-plugin-filtering/context";
 import { StringInputFilterStore } from "@mendix/widget-plugin-filtering/stores/input/StringInputFilterStore";
+import { ObservableFilterHost } from "@mendix/widget-plugin-filtering/typings/ObservableFilterHost";
 import {
     actionValue,
     dynamicValue,