From ca695b12a15aa913919945f447d4d9a970bf8e9e Mon Sep 17 00:00:00 2001
From: Rihan <me@file.properties>
Date: Tue, 13 Dec 2022 22:50:36 +0000
Subject: [PATCH] Remove forwardRef

---
 src/components/Dropdown.tsx | 88 ++++++++++++++++++-------------------
 1 file changed, 43 insertions(+), 45 deletions(-)

diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx
index d0bd882f..9ebef561 100644
--- a/src/components/Dropdown.tsx
+++ b/src/components/Dropdown.tsx
@@ -14,48 +14,46 @@ interface DropdownProps {
   options: Array<OptionItem>;
 }
 
-export const Dropdown = React.forwardRef<HTMLDivElement, DropdownProps>(
-  (props: DropdownProps) => (
-    <div className="relative my-4 max-w-[18rem]">
-      <Listbox value={props.selectedItem} onChange={props.setSelectedItem}>
-        {({ open }) => (
-          <>
-            <Listbox.Button className="relative w-full cursor-default rounded-lg bg-denim-500 py-2 pl-3 pr-10 text-left text-white shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-bink-500  focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-bink-300 sm:text-sm">
-              <span className="block truncate">{props.selectedItem.name}</span>
-              <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-                <Icon
-                  icon={Icons.CHEVRON_DOWN}
-                  className={`transform transition-transform ${
-                    open ? "rotate-180" : ""
-                  }`}
-                />
-              </span>
-            </Listbox.Button>
-            <Transition
-              as={Fragment}
-              leave="transition ease-in duration-100"
-              leaveFrom="opacity-100"
-              leaveTo="opacity-0"
-            >
-              <Listbox.Options className="absolute bottom-11 left-0 right-0 z-10 mt-1 max-h-60 overflow-auto rounded-md bg-denim-500 py-1 text-white shadow-lg ring-1 ring-black ring-opacity-5 scrollbar-thin scrollbar-track-denim-400 scrollbar-thumb-denim-200 focus:outline-none sm:bottom-10 sm:text-sm">
-                {props.options.map((opt) => (
-                  <Listbox.Option
-                    className={({ active }) =>
-                      `relative cursor-default select-none py-2 pl-10 pr-4 ${
-                        active ? "bg-denim-400 text-bink-700" : "text-white"
-                      }`
-                    }
-                    key={opt.id}
-                    value={opt}
-                  >
-                    {opt.name}
-                  </Listbox.Option>
-                ))}
-              </Listbox.Options>
-            </Transition>
-          </>
-        )}
-      </Listbox>
-    </div>
-  )
-);
+export function Dropdown(props: DropdownProps) {
+  <div className="relative my-4 max-w-[18rem]">
+    <Listbox value={props.selectedItem} onChange={props.setSelectedItem}>
+      {({ open }) => (
+        <>
+          <Listbox.Button className="relative w-full cursor-default rounded-lg bg-denim-500 py-2 pl-3 pr-10 text-left text-white shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-bink-500  focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-bink-300 sm:text-sm">
+            <span className="block truncate">{props.selectedItem.name}</span>
+            <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+              <Icon
+                icon={Icons.CHEVRON_DOWN}
+                className={`transform transition-transform ${
+                  open ? "rotate-180" : ""
+                }`}
+              />
+            </span>
+          </Listbox.Button>
+          <Transition
+            as={Fragment}
+            leave="transition ease-in duration-100"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <Listbox.Options className="absolute bottom-11 left-0 right-0 z-10 mt-1 max-h-60 overflow-auto rounded-md bg-denim-500 py-1 text-white shadow-lg ring-1 ring-black ring-opacity-5 scrollbar-thin scrollbar-track-denim-400 scrollbar-thumb-denim-200 focus:outline-none sm:bottom-10 sm:text-sm">
+              {props.options.map((opt) => (
+                <Listbox.Option
+                  className={({ active }) =>
+                    `relative cursor-default select-none py-2 pl-10 pr-4 ${
+                      active ? "bg-denim-400 text-bink-700" : "text-white"
+                    }`
+                  }
+                  key={opt.id}
+                  value={opt}
+                >
+                  {opt.name}
+                </Listbox.Option>
+              ))}
+            </Listbox.Options>
+          </Transition>
+        </>
+      )}
+    </Listbox>
+  </div>;
+}