🐛 fix: onChange not triggered. thanks @ayungavis

packages/frontend/src/components/shared/UserSelect/UserSelect.tsx

@@ -5,14 +5,14 @@ import React, {
   useEffect,
 } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { useCombobox } from 'downshift';
-import { UserSelectTheme, userSelectTheme } from './UserSelect.theme';
+import { useSelect } from 'downshift';
 import {
   BuildingIcon,
   ChevronUpDown,
   SettingsSlidersIcon,
 } from 'components/shared/CustomIcon';
 import { cn } from 'utils/classnames';
+import { UserSelectTheme, userSelectTheme } from './UserSelect.theme';
 import { EmptyUserSelectItem, UserSelectItem } from './UserSelectItem';
 
 export type UserSelectOption = {
@@ -77,21 +77,25 @@ export const UserSelect = ({ options, value }: UserSelectProps) => {
   const isSelected = (item: UserSelectOption) =>
     selectedItem?.value === item.value;
 
-  const { isOpen, getMenuProps, highlightedIndex, getItemProps, openMenu } =
-    useCombobox({
+  const {
+    isOpen,
+    getMenuProps,
+    getToggleButtonProps,
+    highlightedIndex,
+    getItemProps,
+    openMenu,
+  } = useSelect({
     items: options,
     // @ts-expect-error – there are two params but we don't need the second one
     isItemDisabled: (item) => item.disabled,
     onSelectedItemChange: ({ selectedItem }) => {
       if (selectedItem) {
-          console.log(selectedItem);
         handleSelectedItemChange(selectedItem);
       }
     },
     onIsOpenChange: ({ isOpen }) => {
       setDropdownOpen(isOpen ?? false);
     },
-      selectedItem: value || null,
     itemToString: (item) => (item ? item.label : ''),
   });
 
@@ -103,13 +107,17 @@ export const UserSelect = ({ options, value }: UserSelectProps) => {
     <div className={theme.container()}>
       {/* Input */}
       <div
+        {...getToggleButtonProps({
+          ref: inputWrapperRef,
+          suppressRefError: true,
+        })}
         ref={inputWrapperRef}
         onClick={() => !dropdownOpen && openMenu()}
         className="cursor-pointer relative py-2 pl-2 pr-4 flex min-w-[200px] w-full items-center justify-between rounded-xl bg-surface-card shadow-sm"
       >
         <div className="flex gap-3 w-full mr-2">
           <img
-            src="/logo.svg"
+            src={selectedItem?.imgSrc || '/logo.svg'}
             alt="Snowball Logo"
             className="h-10 w-10 rounded-lg"
           />