From 7b5ba1a5d01cdfa7e96d3f63ca36c78457702c33 Mon Sep 17 00:00:00 2001
From: Vivian Phung <dev+github@vivianphung.com>
Date: Wed, 22 May 2024 15:02:51 -0400
Subject: [PATCH] correct suppressRefError (#198)

### TL;DR

This PR refactors the `UserSelect` component, adjusting the call to `getToggleButtonProps`.

### What changed?

The `getToggleButtonProps` method in the `UserSelect` component now takes in two separate objects, one for the `ref` and another for `suppressRefError`, instead of a single one.

### How to test?

Verify the component functionality hasn't changed and there are no reference errors.

### Why make this change?

This code changes improve the readability and maintainability of this component by clearly separating the component reference and error suppression configurations in separate objects.
---
 .../src/components/shared/UserSelect/UserSelect.tsx    | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/src/components/shared/UserSelect/UserSelect.tsx b/packages/frontend/src/components/shared/UserSelect/UserSelect.tsx
index d9faa103..c4a95c10 100644
--- a/packages/frontend/src/components/shared/UserSelect/UserSelect.tsx
+++ b/packages/frontend/src/components/shared/UserSelect/UserSelect.tsx
@@ -103,10 +103,12 @@ export const UserSelect = ({ options, value }: UserSelectProps) => {
     <div className={theme.container()}>
       {/* Input */}
       <div
-        {...getToggleButtonProps({
-          ref: inputWrapperRef,
-          suppressRefError: true,
-        })}
+        {...getToggleButtonProps(
+          {
+            ref: inputWrapperRef,
+          },
+          { suppressRefError: true },
+        )}
         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"
       >