debounce input a little bit

apps/web/src/components/features/ShareMenu/ShareMenuInvite.tsx

@@ -6,7 +6,7 @@ import { Button } from '@/components/ui/buttons';
 import { inputHasText } from '@/lib/text';
 import { isValidEmail } from '@/lib/email';
 import { useBusterNotifications } from '@/context/BusterNotifications';
-import { useMemoizedFn } from '@/hooks';
+import { useDebounce, useMemoizedFn } from '@/hooks';
 import { useShareMetric } from '@/api/buster_rest/metrics';
 import { useShareDashboard } from '@/api/buster_rest/dashboards';
 import { useShareCollection } from '@/api/buster_rest/collections';
@@ -30,12 +30,14 @@ export const ShareMenuInvite: React.FC<ShareMenuInviteProps> = React.memo(
       useShareCollection();
 
     const [inputValue, setInputValue] = React.useState<string>('');
+
     const [defaultPermissionLevel, setDefaultPermissionLevel] =
       React.useState<ShareRole>('canView');
 
+    const debouncedInputValue = useDebounce(inputValue, { wait: 350 });
     const { data: usersData } = useGetUserToOrganization({
-      user_name: inputValue,
-      email: inputValue,
+      user_name: debouncedInputValue,
+      email: debouncedInputValue,
       page: 1,
       page_size: 5
     });

apps/web/src/components/ui/inputs/InputSearchDropdown.stories.tsx

@@ -73,6 +73,8 @@ const InputSearchDropdownWithState = (
         {...args}
         options={filteredOptions}
         onSearch={handleSearch}
+        value={value}
+        onChange={setValue}
         onSelect={handleSelect}
         onPressEnter={handlePressEnter}
       />

apps/web/src/components/ui/popover/PopoverBase.tsx

@@ -40,7 +40,7 @@ const PopoverRoot: React.FC<PopoverProps> = ({ children, trigger = 'click', ...p
     );
 
   return (
-    <Popover {...props} open={trigger === 'hover' ? isOpen : props.open}>
+    <Popover {...props} open={trigger === 'hover' ? isOpen : undefined}>
       {content}
     </Popover>
   );

apps/web/src/hooks/useClickAway.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import { useEffect, useRef, MutableRefObject } from 'react';
 import { useLatest } from './useLatest';