fix: code fixing and cleanup

Author: gjulivan

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

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

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<string> &
@@ -148,15 +148,10 @@ function useComboboxProps(
             selectedItem: null,
             inputId: options?.inputId,
             labelId: options?.labelId,
-            onInputValueChange({ inputValue, type }) {
+            onInputValueChange({ inputValue }) {
                 selector.options.setSearchTerm(inputValue!);
 
-                if (
-                    selector.onFilterInputChange &&
-                    type?.includes("input_change") &&
-                    inputValue &&
-                    inputValue.trim()?.length > 0
-                ) {
+                if (selector.onFilterInputChange) {
                     selector.onFilterInputChange(inputValue);
                 }
             },

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 {
@@ -29,16 +29,10 @@ export function useDownshiftSingleSelectProps(
             onSelectedItemChange({ selectedItem }: UseComboboxStateChange<string>) {
                 selector.setValue(selectedItem ?? null);
             },
-            onInputValueChange({ inputValue, type }) {
+            onInputValueChange({ inputValue }) {
                 selector.options.setSearchTerm(inputValue!);
 
-                if (
-                    selector.onFilterInputChange &&
-                    type &&
-                    (type === "__input_change__" || type?.includes("input_change")) &&
-                    inputValue &&
-                    inputValue.trim().length > 0
-                ) {
+                if (selector.onFilterInputChange) {
                     selector.onFilterInputChange(inputValue!);
                 }
             },

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

@@ -1,50 +1,40 @@
-import { useRef, useState, useCallback } 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<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);
-        },
+    const [onFilterChangeDebounce] = useMemo(
+        () =>
+            debounce((filterValue?: string) => {
+                onInputValueChange(props.onChangeFilterInputEvent, filterValue);
+            }, 200),
         [props.onChangeFilterInputEvent]
     );
 
     if (!selectorRef.current) {
         selectorRef.current = getSelector(props);
         selectorRef.current.options.onAfterSearchTermChange(() => setInput({}));
     }
+    selectorRef.current.onFilterInputChange = onFilterChangeDebounce;
     selectorRef.current.updateProps(props);
-    selectorRef.current.onFilterInputChange = onFilterInputChange;
 
     return selectorRef.current;
 }