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;