refactor: simplify filter handler setup and improve selector initialization

Author: yordan-st

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

@@ -7,7 +7,7 @@ import {
     useCombobox,
     useMultipleSelection
 } from "downshift";
-import { useCallback, useMemo, useRef, useEffect } from "react";
+import { useCallback, useMemo } from "react";
 import { A11yStatusMessage, MultiSelector } from "../helpers/types";
 
 export type UseDownshiftMultiSelectPropsReturnValue = UseMultipleSelectionReturnValue<string> &
@@ -37,12 +37,6 @@ export function useDownshiftMultiSelectProps(
     options: Options,
     a11yStatusMessage: A11yStatusMessage
 ): UseDownshiftMultiSelectPropsReturnValue {
-    const isInitializing = useRef(true);
-
-    useEffect(() => {
-        isInitializing.current = false;
-    }, []);
-
     const {
         getSelectedItemProps,
         getDropdownProps,
@@ -97,7 +91,6 @@ export function useDownshiftMultiSelectProps(
             removeSelectedItem,
             setSelectedItems,
             a11yStatusMessage,
-            isInitializing,
             options
         )
     );
@@ -147,7 +140,6 @@ function useComboboxProps(
     removeSelectedItem: (item: string) => void,
     setSelectedItems: (item: string[]) => void,
     a11yStatusMessage: A11yStatusMessage,
-    isInitializing: React.MutableRefObject<boolean>,
     options?: Options
 ): UseComboboxProps<string> {
     return useMemo(() => {
@@ -156,13 +148,9 @@ function useComboboxProps(
             selectedItem: null,
             inputId: options?.inputId,
             labelId: options?.labelId,
-            onInputValueChange({ inputValue, type }) {
+            onInputValueChange({ inputValue }) {
                 selector.options.setSearchTerm(inputValue!);
-                if (
-                    !isInitializing.current &&
-                    type === useCombobox.stateChangeTypes.InputChange &&
-                    selector.onFilterInputChange
-                ) {
+                if (selector.onFilterInputChange) {
                     selector.onFilterInputChange(inputValue);
                 }
             },

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

@@ -32,8 +32,11 @@ export function useGetSelector(props: ComboboxContainerProps): Selector {
     if (!selectorRef.current) {
         selectorRef.current = getSelector(props);
         selectorRef.current.options.onAfterSearchTermChange(() => setInput({}));
+    } else {
+        if (!selectorRef.current.onFilterInputChange) {
+            selectorRef.current.onFilterInputChange = onFilterChangeDebounce;
+        }
     }
-    selectorRef.current.onFilterInputChange = onFilterChangeDebounce;
     selectorRef.current.updateProps(props);
 
     return selectorRef.current;