From efbe58abe4f986269f1d3f88f3834edc763321da Mon Sep 17 00:00:00 2001
From: Bojan Gabric <bojan@bojangabric.com>
Date: Sat, 13 Jan 2024 15:41:33 +0100
Subject: [PATCH] fix: placeholder to select element (#9905)

---
 components/Tabs.js          | 3 ++-
 components/form/Select.js   | 8 +++++++-
 components/navbar/SubNav.js | 9 ++++++++-
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/components/Tabs.js b/components/Tabs.js
index f6b792fa202..33950de4e12 100644
--- a/components/Tabs.js
+++ b/components/Tabs.js
@@ -1,7 +1,7 @@
 import Select from "@components/form/Select";
 import { classNames } from "@services/utils/classNames";
 
-export default function Tabs({ tabs, setTabs, selectedTab }) {
+export default function Tabs({ tabs, setTabs, selectedTab, placeholder }) {
   return (
     <div>
       <div className="sm:hidden">
@@ -9,6 +9,7 @@ export default function Tabs({ tabs, setTabs, selectedTab }) {
           <Select
             name="tabs"
             value={selectedTab?.name}
+            placeholder={placeholder}
             onChange={(e) =>
               setTabs(tabs.find((tab) => tab.name === e.currentTarget.value))
             }
diff --git a/components/form/Select.js b/components/form/Select.js
index b3592ea1f2d..0ca8466462e 100644
--- a/components/form/Select.js
+++ b/components/form/Select.js
@@ -2,12 +2,13 @@ import { classNames } from "@services/utils/classNames";
 import Label from "./Label";
 
 export default function Select({
-  value,
+  value = "",
   onChange,
   options = [],
   label,
   name,
   className,
+  placeholder,
   ...restProps
 }) {
   return (
@@ -27,6 +28,11 @@ export default function Select({
         )}
         {...restProps}
       >
+        {placeholder && (
+          <option value="" disabled>
+            {placeholder}
+          </option>
+        )}
         {options.map((option) => (
           <option
             className="checked:text-secondary-high checked:font-bold dark:checked:text-secondary-low-high"
diff --git a/components/navbar/SubNav.js b/components/navbar/SubNav.js
index 4d84eb59189..41598af15ca 100644
--- a/components/navbar/SubNav.js
+++ b/components/navbar/SubNav.js
@@ -12,5 +12,12 @@ export default function SubNav({ tabs }) {
     });
   };
 
-  return <Tabs tabs={tabs} setTabs={changeTab} selectedTab={selectedTab} />;
+  return (
+    <Tabs
+      tabs={tabs}
+      setTabs={changeTab}
+      selectedTab={selectedTab}
+      placeholder="Choose a category"
+    />
+  );
 }