refactor: revert selectedItem changes and prevent filter triggers on init

Author: yordan-st

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

@@ -44,13 +44,14 @@ export function SingleSelection({
     });
 
     const selectedItemCaption = useMemo(
-        () => selector.caption.render(selector.currentId, "label"),
+        () => selector.caption.render(selectedItem, "label"),
         // eslint-disable-next-line react-hooks/exhaustive-deps
         [
-            selector.currentId,
+            selectedItem,
             selector.status,
             selector.caption,
             selector.caption.emptyCaption,
+            selector.currentId,
             selector.caption.formatter
         ]
     );

packages/pluggableWidgets/combobox-web/src/helpers/Association/AssociationSingleSelector.ts

@@ -14,7 +14,6 @@ export class AssociationSingleSelector
     }
     setValue(value: string | null): void {
         this._attr?.setValue(this.options._optionToValue(value));
-        this.currentId = value;
         super.setValue(value);
     }
 }

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

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

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

@@ -7,7 +7,7 @@ import {
     useCombobox
 } from "downshift";
 
-import { useCallback, useMemo } from "react";
+import { useCallback, useMemo, useRef, useEffect } from "react";
 import { A11yStatusMessage, SingleSelector } from "../helpers/types";
 
 interface Options {
@@ -21,6 +21,11 @@ export function useDownshiftSingleSelectProps(
     a11yStatusMessage: A11yStatusMessage
 ): UseComboboxReturnValue<string> {
     const { inputId, labelId } = options;
+    const isInitializing = useRef(true);
+
+    useEffect(() => {
+        isInitializing.current = false;
+    }, []);
 
     const downshiftProps: UseComboboxProps<string> = useMemo(() => {
         return {
@@ -30,11 +35,13 @@ export function useDownshiftSingleSelectProps(
                 selector.setValue(selectedItem ?? null);
             },
             onInputValueChange({ inputValue, type }) {
-                if (type === useCombobox.stateChangeTypes.InputChange) {
-                    selector.options.setSearchTerm(inputValue!);
-                    if (selector.onFilterInputChange) {
-                        selector.onFilterInputChange(inputValue!);
-                    }
+                selector.options.setSearchTerm(inputValue!);
+                if (
+                    !isInitializing.current &&
+                    type === useCombobox.stateChangeTypes.InputChange &&
+                    selector.onFilterInputChange
+                ) {
+                    selector.onFilterInputChange(inputValue!);
                 }
             },
             getA11yStatusMessage(options) {