From 41bcb2e7d0033affc845664de353f8f53b65ede6 Mon Sep 17 00:00:00 2001
From: Vivian Phung <dev+github@vivianphung.com>
Date: Mon, 24 Jun 2024 18:51:31 -0400
Subject: [PATCH] fix: ProjectSearchBarDialog `suppressRefError` (#222)

This PR resolves issues with the Project Search Bar component where `getMenuProps` was causing reference errors. By adding `suppressRefError: true` to `getMenuProps` in both `ProjectSearchBar` and `ProjectSearchBarDialog`, the warnings are suppressed.

---
---
 .../projects/ProjectSearchBar/ProjectSearchBar.tsx   |  2 +-
 .../ProjectSearchBar/ProjectSearchBarDialog.tsx      | 12 ++++++++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/components/projects/ProjectSearchBar/ProjectSearchBar.tsx b/packages/frontend/src/components/projects/ProjectSearchBar/ProjectSearchBar.tsx
index 0c7e3b5..df3b09b 100644
--- a/packages/frontend/src/components/projects/ProjectSearchBar/ProjectSearchBar.tsx
+++ b/packages/frontend/src/components/projects/ProjectSearchBar/ProjectSearchBar.tsx
@@ -62,7 +62,7 @@ export const ProjectSearchBar = ({ onChange }: ProjectSearchBarProps) => {
     <div className="relative w-full lg:w-fit">
       <SearchBar {...getInputProps()} />
       <div
-        {...getMenuProps()}
+        {...getMenuProps({}, { suppressRefError: true })}
         className={cn(
           'flex flex-col shadow-dropdown rounded-xl bg-surface-card absolute w-[459px] max-h-52 overflow-y-auto px-2 py-2 gap-1 z-50',
           { hidden: !inputValue || !isOpen },
diff --git a/packages/frontend/src/components/projects/ProjectSearchBar/ProjectSearchBarDialog.tsx b/packages/frontend/src/components/projects/ProjectSearchBar/ProjectSearchBarDialog.tsx
index 3b645e8..79a208e 100644
--- a/packages/frontend/src/components/projects/ProjectSearchBar/ProjectSearchBarDialog.tsx
+++ b/packages/frontend/src/components/projects/ProjectSearchBar/ProjectSearchBarDialog.tsx
@@ -80,7 +80,7 @@ export const ProjectSearchBarDialog = ({
           <div className="h-full flex flex-col fixed top-0 inset-0">
             <div className="py-2.5 px-4 flex items-center justify-between border-b border-border-separator/[0.06]">
               <Input
-                {...getInputProps()}
+                {...getInputProps({}, { suppressRefError: true })}
                 leftIcon={<SearchIcon />}
                 placeholder="Search"
                 appearance="borderless"
@@ -91,7 +91,15 @@ export const ProjectSearchBarDialog = ({
               </Button>
             </div>
             {/* Content */}
-            <div className="flex flex-col gap-1 px-2 py-2" {...getMenuProps()}>
+            <div
+              className="flex flex-col gap-1 px-2 py-2"
+              {...getMenuProps(
+                {},
+                {
+                  suppressRefError: true,
+                },
+              )}
+            >
               {items.length > 0
                 ? items.map((item, index) => (
                     <>