diff --git a/packages/pluggableWidgets/combobox-web/CHANGELOG.md b/packages/pluggableWidgets/combobox-web/CHANGELOG.md
index 2d993ae99d..487537f839 100644
--- a/packages/pluggableWidgets/combobox-web/CHANGELOG.md
+++ b/packages/pluggableWidgets/combobox-web/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
## [Unreleased]
+### Added
+
+- We added a new "On change filter input" event that triggers when users type in the combobox filter field, passing the current filter text as an action variable to enable custom nanoflows/microflows for dynamic filtering scenarios.
+
## [2.4.3] - 2025-07-22
### Fixed
diff --git a/packages/pluggableWidgets/combobox-web/package.json b/packages/pluggableWidgets/combobox-web/package.json
index f0e229cd9d..4d19b55e67 100644
--- a/packages/pluggableWidgets/combobox-web/package.json
+++ b/packages/pluggableWidgets/combobox-web/package.json
@@ -1,7 +1,7 @@
{
"name": "@mendix/combobox-web",
"widgetName": "Combobox",
- "version": "2.4.3",
+ "version": "2.5.0",
"description": "Configurable Combo box widget with suggestions and autocomplete.",
"copyright": "© Mendix Technology BV 2025. All rights reserved.",
"license": "Apache-2.0",
@@ -20,7 +20,7 @@
},
"packagePath": "com.mendix.widget.web",
"marketplace": {
- "minimumMXVersion": "10.7.0",
+ "minimumMXVersion": "10.22.0",
"appNumber": 219304,
"appName": "Combo box",
"reactReady": true
diff --git a/packages/pluggableWidgets/combobox-web/src/Combobox.xml b/packages/pluggableWidgets/combobox-web/src/Combobox.xml
index 5f87880ab5..588b58d691 100644
--- a/packages/pluggableWidgets/combobox-web/src/Combobox.xml
+++ b/packages/pluggableWidgets/combobox-web/src/Combobox.xml
@@ -314,21 +314,34 @@
- On change action
+ On change
- On change action
+ On change
- On enter action
+ On enter
- On leave action
+ On leave
+
+
+ On filter input change
+
+
+
+
+
+
+
+ Debounce interval
+ The debounce interval in milliseconds.
+
diff --git a/packages/pluggableWidgets/combobox-web/src/helpers/types.ts b/packages/pluggableWidgets/combobox-web/src/helpers/types.ts
index edf5013642..1fb5795f7c 100644
--- a/packages/pluggableWidgets/combobox-web/src/helpers/types.ts
+++ b/packages/pluggableWidgets/combobox-web/src/helpers/types.ts
@@ -79,6 +79,7 @@ interface SelectorBase {
onEnterEvent?: () => void;
onLeaveEvent?: () => void;
+ onFilterInputChange?: (filterValue?: string) => void;
}
export interface SingleSelector extends SelectorBase<"single", string> {}
@@ -101,6 +102,7 @@ export interface SelectionBaseProps {
tabIndex: number;
ariaRequired: DynamicValue;
ariaLabel?: string;
+ onFilterInputChange?: (filterValue: string) => void;
a11yConfig: {
ariaLabels: {
clearSelection: string;
diff --git a/packages/pluggableWidgets/combobox-web/src/hooks/useDownshiftMultiSelectProps.ts b/packages/pluggableWidgets/combobox-web/src/hooks/useDownshiftMultiSelectProps.ts
index fbef975c0c..0a48473ac1 100644
--- a/packages/pluggableWidgets/combobox-web/src/hooks/useDownshiftMultiSelectProps.ts
+++ b/packages/pluggableWidgets/combobox-web/src/hooks/useDownshiftMultiSelectProps.ts
@@ -7,7 +7,7 @@ import {
useCombobox,
useMultipleSelection
} from "downshift";
-import { useMemo, useCallback } from "react";
+import { useCallback, useMemo } from "react";
import { A11yStatusMessage, MultiSelector } from "../helpers/types";
export type UseDownshiftMultiSelectPropsReturnValue = UseMultipleSelectionReturnValue &
@@ -150,6 +150,9 @@ function useComboboxProps(
labelId: options?.labelId,
onInputValueChange({ inputValue }) {
selector.options.setSearchTerm(inputValue!);
+ if (selector.onFilterInputChange) {
+ selector.onFilterInputChange(inputValue);
+ }
},
getA11yStatusMessage(options) {
let message =
diff --git a/packages/pluggableWidgets/combobox-web/src/hooks/useDownshiftSingleSelectProps.ts b/packages/pluggableWidgets/combobox-web/src/hooks/useDownshiftSingleSelectProps.ts
index f65a2d9cbc..fde8fefbfc 100644
--- a/packages/pluggableWidgets/combobox-web/src/hooks/useDownshiftSingleSelectProps.ts
+++ b/packages/pluggableWidgets/combobox-web/src/hooks/useDownshiftSingleSelectProps.ts
@@ -7,7 +7,7 @@ import {
useCombobox
} from "downshift";
-import { useMemo, useCallback } from "react";
+import { useCallback, useMemo } from "react";
import { A11yStatusMessage, SingleSelector } from "../helpers/types";
interface Options {
@@ -31,6 +31,9 @@ export function useDownshiftSingleSelectProps(
},
onInputValueChange({ inputValue }) {
selector.options.setSearchTerm(inputValue!);
+ if (selector.onFilterInputChange) {
+ selector.onFilterInputChange(inputValue!);
+ }
},
getA11yStatusMessage(options) {
const selectedItem = selector.caption.get(selector.currentId);
diff --git a/packages/pluggableWidgets/combobox-web/src/hooks/useGetSelector.ts b/packages/pluggableWidgets/combobox-web/src/hooks/useGetSelector.ts
index a0ac85d1a9..d4c1dd47bc 100644
--- a/packages/pluggableWidgets/combobox-web/src/hooks/useGetSelector.ts
+++ b/packages/pluggableWidgets/combobox-web/src/hooks/useGetSelector.ts
@@ -1,15 +1,43 @@
-import { useRef, useState } from "react";
+import { debounce } from "@mendix/widget-plugin-platform/utils/debounce";
+import { useMemo, useRef, useState } from "react";
import { ComboboxContainerProps } from "../../typings/ComboboxProps";
import { getSelector } from "../helpers/getSelector";
import { Selector } from "../helpers/types";
+function onInputValueChange(
+ onChangeFilterInputEvent: ComboboxContainerProps["onChangeFilterInputEvent"],
+ filterValue?: string
+): void {
+ if (!onChangeFilterInputEvent) {
+ return;
+ }
+ if (onChangeFilterInputEvent.canExecute && !onChangeFilterInputEvent.isExecuting) {
+ onChangeFilterInputEvent.execute({
+ filterInput: filterValue
+ });
+ }
+}
+
export function useGetSelector(props: ComboboxContainerProps): Selector {
const selectorRef = useRef(undefined);
const [, setInput] = useState({});
+ const [onFilterChangeDebounce] = useMemo(
+ () =>
+ debounce((filterValue?: string) => {
+ onInputValueChange(props.onChangeFilterInputEvent, filterValue);
+ }, props.debounceInterval ?? 200),
+ [props.onChangeFilterInputEvent, props.debounceInterval]
+ );
+
if (!selectorRef.current) {
selectorRef.current = getSelector(props);
selectorRef.current.options.onAfterSearchTermChange(() => setInput({}));
+ } else {
+ if (!selectorRef.current.onFilterInputChange) {
+ selectorRef.current.onFilterInputChange = onFilterChangeDebounce;
+ }
}
selectorRef.current.updateProps(props);
+
return selectorRef.current;
}
diff --git a/packages/pluggableWidgets/combobox-web/src/package.xml b/packages/pluggableWidgets/combobox-web/src/package.xml
index 5fcc7377bf..7607566d28 100644
--- a/packages/pluggableWidgets/combobox-web/src/package.xml
+++ b/packages/pluggableWidgets/combobox-web/src/package.xml
@@ -1,6 +1,6 @@
-
+
diff --git a/packages/pluggableWidgets/combobox-web/typings/ComboboxProps.d.ts b/packages/pluggableWidgets/combobox-web/typings/ComboboxProps.d.ts
index d23d3a96ac..f2b68571c8 100644
--- a/packages/pluggableWidgets/combobox-web/typings/ComboboxProps.d.ts
+++ b/packages/pluggableWidgets/combobox-web/typings/ComboboxProps.d.ts
@@ -4,7 +4,7 @@
* @author Mendix Widgets Framework Team
*/
import { ComponentType, ReactNode } from "react";
-import { ActionValue, DynamicValue, EditableValue, ListValue, ListAttributeValue, ListExpressionValue, ListWidgetValue, ReferenceValue, ReferenceSetValue, SelectionSingleValue, SelectionMultiValue } from "mendix";
+import { ActionValue, DynamicValue, EditableValue, ListValue, Option, ListAttributeValue, ListExpressionValue, ListWidgetValue, ReferenceValue, ReferenceSetValue, SelectionSingleValue, SelectionMultiValue } from "mendix";
import { Big } from "big.js";
export type SourceEnum = "context" | "database" | "static";
@@ -89,6 +89,8 @@ export interface ComboboxContainerProps {
onChangeEvent?: ActionValue;
onEnterEvent?: ActionValue;
onLeaveEvent?: ActionValue;
+ onChangeFilterInputEvent?: ActionValue<{ filterInput: Option }>;
+ debounceInterval?: number;
ariaRequired: DynamicValue;
ariaLabel?: DynamicValue;
clearButtonAriaLabel?: DynamicValue;
@@ -145,6 +147,8 @@ export interface ComboboxPreviewProps {
onChangeDatabaseEvent: {} | null;
onEnterEvent: {} | null;
onLeaveEvent: {} | null;
+ onChangeFilterInputEvent: {} | null;
+ debounceInterval: number | null;
ariaRequired: string;
ariaLabel: string;
clearButtonAriaLabel: string;