[WC-3026] Combobox: Enable onFilterInputChange action with ActionVariables

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

packages/pluggableWidgets/combobox-web/package.json

@@ -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

packages/pluggableWidgets/combobox-web/src/Combobox.xml

@@ -329,6 +329,14 @@
                 <caption>On leave action</caption>
                 <description />
             </property>
+
+            <property key="onChangeFilterInputEvent" type="action" required="false">
+                <caption>On change filter input</caption>
+                <description />
+                <actionVariables>
+                    <actionVariable key="filterInput" caption="Filter Input" type="String" />
+                </actionVariables>
+            </property>
         </propertyGroup>
         <propertyGroup caption="Accessibility">
             <propertyGroup caption="Accessibility">

packages/pluggableWidgets/combobox-web/src/components/MultiSelection/MultiSelection.tsx

@@ -16,7 +16,11 @@ export function MultiSelection({
     a11yConfig,
     menuFooterContent,
     ariaRequired,
-    ...options
+    labelId,
+    inputId,
+    ariaLabel,
+    readOnlyStyle,
+    noOptionsText
 }: SelectionBaseProps<MultiSelector>): ReactElement {
     const {
         isOpen,
@@ -33,11 +37,11 @@ export function MultiSelection({
         items,
         setSelectedItems,
         toggleSelectedItem
-    } = useDownshiftMultiSelectProps(selector, options, a11yConfig.a11yStatusMessage);
+    } = useDownshiftMultiSelectProps(selector, { inputId, labelId }, a11yConfig.a11yStatusMessage);
     const inputRef = useRef<HTMLInputElement>(null);
     const isSelectedItemsBoxStyle = selector.selectedItemsStyle === "boxes";
     const isOptionsSelected = selector.isOptionsSelected();
-    const inputLabel = getInputLabel(options.inputId);
+    const inputLabel = getInputLabel(inputId);
     const hasLabel = useMemo(() => Boolean(inputLabel), [inputLabel]);
     const inputProps = getInputProps({
         ...getDropdownProps(
@@ -65,7 +69,7 @@ export function MultiSelection({
         disabled: selector.readOnly,
         readOnly: selector.options.filterType === "none",
         "aria-required": ariaRequired.value,
-        "aria-label": !hasLabel && options.ariaLabel ? options.ariaLabel : undefined
+        "aria-label": !hasLabel && ariaLabel ? ariaLabel : undefined
     });
 
     const memoizedselectedCaptions = useMemo(
@@ -91,7 +95,7 @@ export function MultiSelection({
             <ComboboxWrapper
                 isOpen={isOpen}
                 readOnly={selector.readOnly}
-                readOnlyStyle={options.readOnlyStyle}
+                readOnlyStyle={readOnlyStyle}
                 getToggleButtonProps={getToggleButtonProps}
                 validation={selector.validation}
                 isLoading={lazyLoading && selector.options.isLoading}
@@ -168,7 +172,7 @@ export function MultiSelection({
                         <SelectAllButton
                             disabled={items.length === 0}
                             value={isOptionsSelected}
-                            id={`${options.inputId}-select-all-button`}
+                            id={`${inputId}-select-all-button`}
                             ariaLabel={a11yConfig.ariaLabels.selectAll}
                             onChange={() => {
                                 if (isOptionsSelected === "all") {
@@ -181,15 +185,15 @@ export function MultiSelection({
                     ) : undefined
                 }
                 menuFooterContent={menuFooterContent}
-                inputId={options.inputId}
+                inputId={inputId}
                 selector={selector}
                 isOpen={isOpen}
                 highlightedIndex={highlightedIndex}
                 selectableItems={items}
                 getItemProps={getItemProps}
                 getMenuProps={getMenuProps}
                 selectedItems={selectedItems}
-                noOptionsText={options.noOptionsText}
+                noOptionsText={noOptionsText}
                 onOptionClick={() => {
                     inputRef.current?.focus();
                 }}

packages/pluggableWidgets/combobox-web/src/components/SingleSelection/SingleSelection.tsx

@@ -27,7 +27,7 @@ export function SingleSelection({
         reset,
         isOpen,
         highlightedIndex
-    } = useDownshiftSingleSelectProps(selector, options, a11yConfig.a11yStatusMessage);
+    } = useDownshiftSingleSelectProps(selector, { ...options }, a11yConfig.a11yStatusMessage);
     const inputRef = useRef<HTMLInputElement>(null);
     const lazyLoading = selector.lazyLoading ?? false;
     const { onScroll } = useLazyLoading({

packages/pluggableWidgets/combobox-web/src/helpers/types.ts

@@ -79,9 +79,10 @@
 
     onEnterEvent?: () => void;
     onLeaveEvent?: () => void;
+    onFilterInputChange?: (filterValue: string) => void;
 }
 
 export interface SingleSelector extends SelectorBase<"single", string> {}
 export interface MultiSelector extends SelectorBase<"multi", string[]> {
     selectedItemsStyle: SelectedItemsStyleEnum;
     selectionMethod: SelectionMethodEnum;
@@ -101,6 +102,7 @@
     tabIndex: number;
     ariaRequired: DynamicValue<boolean>;
     ariaLabel?: string;
+    onFilterInputChange?: (filterValue: string) => void;
     a11yConfig: {
         ariaLabels: {
             clearSelection: string;

packages/pluggableWidgets/combobox-web/src/hooks/useDownshiftMultiSelectProps.ts

@@ -148,8 +148,17 @@ function useComboboxProps(
             selectedItem: null,
             inputId: options?.inputId,
             labelId: options?.labelId,
-            onInputValueChange({ inputValue }) {
+            onInputValueChange({ inputValue, type }) {
                 selector.options.setSearchTerm(inputValue!);
+
+                if (
+                    selector.onFilterInputChange &&
+                    type?.includes("input_change") &&
+                    inputValue &&
+                    inputValue.trim()?.length > 0
+                ) {
+                    selector.onFilterInputChange(inputValue);
+                }
             },
             getA11yStatusMessage(options) {
                 let message =

packages/pluggableWidgets/combobox-web/src/hooks/useDownshiftSingleSelectProps.ts

@@ -29,8 +29,18 @@ export function useDownshiftSingleSelectProps(
             onSelectedItemChange({ selectedItem }: UseComboboxStateChange<string>) {
                 selector.setValue(selectedItem ?? null);
             },
-            onInputValueChange({ inputValue }) {
+            onInputValueChange({ inputValue, type }) {
                 selector.options.setSearchTerm(inputValue!);
+
+                if (
+                    selector.onFilterInputChange &&
+                    type &&
+                    (type === "__input_change__" || type?.includes("input_change")) &&
+                    inputValue &&
+                    inputValue.trim().length > 0
+                ) {
+                    selector.onFilterInputChange(inputValue!);
+                }
             },
             getA11yStatusMessage(options) {
                 const selectedItem = selector.caption.get(selector.currentId);

packages/pluggableWidgets/combobox-web/src/hooks/useGetSelector.ts

@@ -1,15 +1,50 @@
-import { useRef, useState } from "react";
+import { useRef, useState, useCallback } from "react";
 import { ComboboxContainerProps } from "../../typings/ComboboxProps";
 import { getSelector } from "../helpers/getSelector";
 import { Selector } from "../helpers/types";
 
 export function useGetSelector(props: ComboboxContainerProps): Selector {
     const selectorRef = useRef<Selector | undefined>(undefined);
     const [, setInput] = useState({});
+    const debounceTimeoutRef = useRef<NodeJS.Timeout>();
+    const lastExecutedValueRef = useRef<string>("");
+
+    const onFilterInputChange = useCallback(
+        (filterValue: string) => {
+            if (!props.onChangeFilterInputEvent) {
+                return;
+            }
+
+            if (lastExecutedValueRef.current === filterValue) {
+                return;
+            }
+
+            if (debounceTimeoutRef.current) {
+                clearTimeout(debounceTimeoutRef.current);
+            }
+
+            debounceTimeoutRef.current = setTimeout(() => {
+                lastExecutedValueRef.current = filterValue;
+                try {
+                    if (props.onChangeFilterInputEvent?.canExecute && !props.onChangeFilterInputEvent?.isExecuting) {
+                        props.onChangeFilterInputEvent.execute({
+                            filterInput: filterValue
+                        });
+                    }
+                } catch (error) {
+                    console.error("Error executing onChangeFilterInputEvent:", error);
+                }
+            }, 300);
+        },
+        [props.onChangeFilterInputEvent]
+    );
+
     if (!selectorRef.current) {
         selectorRef.current = getSelector(props);
         selectorRef.current.options.onAfterSearchTermChange(() => setInput({}));
     }
     selectorRef.current.updateProps(props);
+    selectorRef.current.onFilterInputChange = onFilterInputChange;
+
     return selectorRef.current;
 }

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,7 @@ export interface ComboboxContainerProps {
     onChangeEvent?: ActionValue;
     onEnterEvent?: ActionValue;
     onLeaveEvent?: ActionValue;
+    onChangeFilterInputEvent?: ActionValue<{ filterInput: Option<string> }>;
     ariaRequired: DynamicValue<boolean>;
     ariaLabel?: DynamicValue<string>;
     clearButtonAriaLabel?: DynamicValue<string>;
@@ -145,6 +146,7 @@ export interface ComboboxPreviewProps {
     onChangeDatabaseEvent: {} | null;
     onEnterEvent: {} | null;
     onLeaveEvent: {} | null;
+    onChangeFilterInputEvent: {} | null;
     ariaRequired: string;
     ariaLabel: string;
     clearButtonAriaLabel: string;