fix: triggers filter input change only on input change type

Author: gjulivan

packages/pluggableWidgets/combobox-web/src/Combobox.editorConfig.ts

@@ -178,6 +178,10 @@ export function getProperties(
         hidePropertiesIn(defaultProperties, values, ["loadingType"]);
     }
 
+    if (values.onChangeFilterInputEvent === null) {
+        hidePropertiesIn(defaultProperties, values, ["filterInputDebounceInterval"]);
+    }
+
     return defaultProperties;
 }
 

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

@@ -337,10 +337,9 @@
                     <actionVariable key="filterInput" caption="Filter Input" type="String" />
                 </actionVariables>
             </property>
-
-            <property key="debounceInterval" type="integer" required="true" defaultValue="200">
+            <property key="filterInputDebounceInterval" type="integer" required="true" defaultValue="200">
                 <caption>Debounce interval</caption>
-                <description>The debounce interval in milliseconds.</description>
+                <description>The debounce interval for each filter input change event triggered in milliseconds.</description>
             </property>
         </propertyGroup>
         <propertyGroup caption="Accessibility">

packages/pluggableWidgets/combobox-web/src/__tests__/MultiSelection.spec.tsx

@@ -76,7 +76,8 @@ describe("Combo box (Association)", () => {
             ],
             selectedItemsSorting: "none",
             customEditability: "default",
-            customEditabilityExpression: dynamic(false)
+            customEditabilityExpression: dynamic(false),
+            filterInputDebounceInterval: 200
         };
         if (defaultProps.optionsSourceAssociationCaptionType === "expression") {
             defaultProps.optionsSourceAssociationCaptionExpression!.get = i => dynamic(`${i.id}`);

packages/pluggableWidgets/combobox-web/src/__tests__/SingleSelection.spec.tsx

@@ -79,7 +79,8 @@ describe("Combo box (Association)", () => {
             ],
             selectedItemsSorting: "none",
             customEditability: "default",
-            customEditabilityExpression: dynamic(false)
+            customEditabilityExpression: dynamic(false),
+            filterInputDebounceInterval: 200
         };
         if (defaultProps.optionsSourceAssociationCaptionType === "expression") {
             defaultProps.optionsSourceAssociationCaptionExpression!.get = i => dynamic(`${i.id}`);

packages/pluggableWidgets/combobox-web/src/__tests__/StaticSelection.spec.tsx

@@ -77,7 +77,8 @@ describe("Combo box (Static values)", () => {
             ],
             selectedItemsSorting: "none",
             customEditability: "default",
-            customEditabilityExpression: dynamic(false)
+            customEditabilityExpression: dynamic(false),
+            filterInputDebounceInterval: 200
         };
         if (defaultProps.optionsSourceAssociationCaptionType === "expression") {
             defaultProps.optionsSourceAssociationCaptionExpression!.get = i => dynamic(`${i.id}`);

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

@@ -2,6 +2,7 @@ import {
     UseComboboxProps,
     UseComboboxReturnValue,
     UseComboboxState,
+    UseComboboxStateChange,
     UseComboboxStateChangeOptions,
     UseMultipleSelectionReturnValue,
     useCombobox,
@@ -148,9 +149,9 @@ function useComboboxProps(
             selectedItem: null,
             inputId: options?.inputId,
             labelId: options?.labelId,
-            onInputValueChange({ inputValue }) {
+            onInputValueChange({ inputValue, type }: UseComboboxStateChange<string>) {
                 selector.options.setSearchTerm(inputValue!);
-                if (selector.onFilterInputChange) {
+                if (selector.onFilterInputChange && type === useCombobox.stateChangeTypes.InputChange) {
                     selector.onFilterInputChange(inputValue);
                 }
             },

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

@@ -2,8 +2,8 @@ import {
     UseComboboxProps,
     UseComboboxReturnValue,
     UseComboboxState,
-    UseComboboxStateChange,
     UseComboboxStateChangeOptions,
+    UseComboboxStateChange,
     useCombobox
 } from "downshift";
 
@@ -29,9 +29,9 @@ export function useDownshiftSingleSelectProps(
             onSelectedItemChange({ selectedItem }: UseComboboxStateChange<string>) {
                 selector.setValue(selectedItem ?? null);
             },
-            onInputValueChange({ inputValue }) {
+            onInputValueChange({ inputValue, type }: UseComboboxStateChange<string>) {
                 selector.options.setSearchTerm(inputValue!);
-                if (selector.onFilterInputChange) {
+                if (selector.onFilterInputChange && type === useCombobox.stateChangeTypes.InputChange) {
                     selector.onFilterInputChange(inputValue!);
                 }
             },

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

@@ -25,8 +25,8 @@ export function useGetSelector(props: ComboboxContainerProps): Selector {
         () =>
             debounce((filterValue?: string) => {
                 onInputValueChange(props.onChangeFilterInputEvent, filterValue);
-            }, props.debounceInterval ?? 200),
-        [props.onChangeFilterInputEvent, props.debounceInterval]
+            }, props.filterInputDebounceInterval ?? 200),
+        [props.onChangeFilterInputEvent, props.filterInputDebounceInterval]
     );
 
     if (!selectorRef.current) {

packages/pluggableWidgets/combobox-web/typings/ComboboxProps.d.ts

@@ -90,7 +90,7 @@ export interface ComboboxContainerProps {
     onEnterEvent?: ActionValue;
     onLeaveEvent?: ActionValue;
     onChangeFilterInputEvent?: ActionValue<{ filterInput: Option<string> }>;
-    debounceInterval?: number;
+    filterInputDebounceInterval: number;
     ariaRequired: DynamicValue<boolean>;
     ariaLabel?: DynamicValue<string>;
     clearButtonAriaLabel?: DynamicValue<string>;
@@ -148,7 +148,7 @@ export interface ComboboxPreviewProps {
     onEnterEvent: {} | null;
     onLeaveEvent: {} | null;
     onChangeFilterInputEvent: {} | null;
-    debounceInterval: number | null;
+    filterInputDebounceInterval: number | null;
     ariaRequired: string;
     ariaLabel: string;
     clearButtonAriaLabel: string;