[BUG] Duplicate select form element #8147

components/Tabs.js

@@ -1,6 +1,6 @@
 import Link from "@components/Link";
+import Select from "@components/form/Select";
 import { classNames } from "utils/functions/classNames";
-
 export default function Tabs({ tabs, setTabs }) {
   const changeTab = (e, value) => {
     e.preventDefault();
@@ -16,21 +16,15 @@ export default function Tabs({ tabs, setTabs }) {
   return (
     <div>
       <div className="sm:hidden">
-        <label htmlFor="tabs" className="sr-only">
-          Select a tab
-        </label>
         {tabs.length > 1 && (
-          <select
+          <Select
             id="tabs"
-            name="tabs"
+            value={tabs.find((tab) => tab.current).name}
+            label="Select a tab"
             onChange={changeTab}
             className="block w-full rounded-md border-primary-medium-low dark:bg-primary-medium focus:border-secondary-medium focus:ring-secondary-medium"
-            defaultValue={tabs.find((tab) => tab.current).name}
-          >
-            {tabs.map((tab) => (
-              <option key={tab.name}>{tab.name}</option>
-            ))}
-          </select>
+            options={tabs.map((tab) => ({ label: tab.name, value: tab.name }))}
+          />
         )}
       </div>
       <div className="hidden sm:block">

components/event/EventTabs.js

@@ -1,6 +1,6 @@
 import Link from "@components/Link";
+import Select from "@components/form/Select";
 import { classNames } from "utils/functions/classNames";
-
 export function EventTabs({ tabs, eventType, setEventType }) {
   const changeTab = (e, value) => {
     e.preventDefault();
@@ -13,20 +13,14 @@ export function EventTabs({ tabs, eventType, setEventType }) {
   return (
     <div>
       <div className="sm:hidden">
-        <label htmlFor="tabs" className="sr-only">
-          Select a tab
-        </label>
-        <select
+        <Select
           id="tabs"
-          name="tabs"
+          label="Select a tab"
+          value={tabs.find((tab) => tab.key === eventType)?.title}
           onChange={(e) => changeTab(e)}
           className="block w-full rounded-md border-primary-medium-low dark:bg-primary-medium dark:focus:border-secondary-low dark:focus:ring-secondary-low  focus:border-secondary-low focus:ring-secondary-low"
-          defaultValue={tabs.find((tab) => tab.key === eventType)?.title}
-        >
-          {tabs.map((tab) => (
-            <option key={tab.key}>{tab.title}</option>
-          ))}
-        </select>
+          options={tabs.map((tab) => ({ label: tab.title, value: tab.title }))}
+        />
       </div>
       <div className="hidden sm:block">
         <div className="border-b border-primary-low">

components/form/Select.js

@@ -1,26 +1,35 @@
 export default function Select({
-  name,
   value,
-  label,
+  onChange,
   options = [],
+  label,
+  className,
   ...restProps
 }) {
   return (
     <>
       {label && (
-        <label htmlFor={name} className="mt-4 mb-3">
+        <label htmlFor={value} className={`sr-only ${className}`}>
           {label}
         </label>
       )}
       <select
-        id={name}
-        name={name}
-        className="mt-2 text-primary-high dark:bg-primary-high dark:text-white border-2 transition-all duration-250 ease-linear rounded px-6 py-2 mb-2 block w-full sm:text-sm sm:leading-6"
-        defaultValue={value}
+        id={value}
+        value={value}
+        onChange={onChange}
+        className={`mt-2 text-primary-high dark:bg-primary-high dark:text-white border-2 transition-all duration-250 ease-linear rounded px-6 py-2 mb-2 block w-full sm:text-sm sm:leading-6 ${
+          restProps.className || ""
+        }`}
         {...restProps}
       >
-        {options.map((v) => (
-          <option key={v} className="checked:text-secondary-high checked:font-bold dark:checked:text-secondary-low-high">{v}</option>
+        {options.map((option) => (
+          <option
+            className="checked:text-secondary-high checked:font-bold dark:checked:text-secondary-low-high"
+            key={option.value}
+            value={option.value}
+          >
+            {option.label || option}
+          </option>
         ))}
       </select>
     </>

components/navbar/SubNav.js

@@ -1,4 +1,5 @@
 import Link from "@components/Link";
+import Select from "@components/form/Select";
 import Router, { useRouter } from "next/router";
 import { classNames } from "utils/functions/classNames";
 
@@ -20,21 +21,18 @@ export default function SubNav({ tabs }) {
         <label htmlFor="tabs" className="sr-only">
           Select a tab
         </label>
-        <select
+        <Select
           id="tabs"
-          name="tabs"
+          value={tabs.find((tab) => tab.current).name}
+          label="Select a tab"
+          options={tabs.map((tab) => ({ label: tab.name, value: tab.name }))}
           className="block w-full rounded-md 
           border-primary-low-medium/30 dark:border-primary-low-medium
           dark:text-primary-low
           dark:bg-primary-medium
           focus:border-secondary-medium-low focus:ring-secondary-medium-low"
-          defaultValue={tabs.find((tab) => tab.current).name}
           onChange={changeTab}
-        >
-          {tabs.map((tab) => (
-            <option key={tab.name}>{tab.name}</option>
-          ))}
-        </select>
+        />
       </div>
       <div className="hidden sm:block">
         <div className="border-b border-primary-low-medium/30">

components/user/UserEvents.js

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import EventCard from "@components/event/EventCard";
 import Alert from "@components/Alert";
-import DropdownMenu from "@components/form/DropDown";
+import Select from "@components/form/Select";
 
 export default function UserEvents({
   manage = false,
@@ -21,7 +21,6 @@ export default function UserEvents({
     { value: "paid", name: "Paid Events" },
     { value: "past", name: "Past Events" },
   ];
-
   const handleEventTypeChange = (event) => {
     setEventType(event.target.value);
   };
@@ -54,9 +53,7 @@ export default function UserEvents({
     }
     return events.filter((event) => filterByEventType(event, eventType));
   };
-
   const eventsToShow = getFilteredEvents();
-
   const filteredEventOptions = eventOptions.filter((option) => {
     if (option.value === "all") {
       return true;
@@ -69,18 +66,24 @@ export default function UserEvents({
 
   return (
     <>
-      {!eventsToShow?.length && <Alert type="info" message="No Events found" />}
-
+      {eventsToShow.length === 0 && !manage && (
+        <Alert type="info" message="No Events found" />
+      )}
+
       {!manage && (
-        <DropdownMenu
-          eventType={eventType}
-          handleEventTypeChange={handleEventTypeChange}
-          options={filteredEventOptions}
-          label="Select Event Type:"
-          className="inline text-center text-sm font-medium leading-6 text-primary-high sm:pt-1.5 dark:text-primary-low"
+
+        <Select
+          id="event-type"
+          value={eventType}
+          label="Select an event type"
+          onChange={handleEventTypeChange}
+          options={filteredEventOptions.map((option) => ({
+            label: option.name,
+            value: option.value,
+          }))}
+          className="inline text-center text-sm font-medium leading-6 text-primary-high sm:pt-1.5"
         />
       )}
-
       {eventsToShow.length > 0 && (
         <ul role="list" className="mt-4">
           {eventsToShow.map((event, index) => (

pages/account/manage/milestone/[[...data]].js

@@ -133,7 +133,7 @@ export default function ManageMilestone({ BASE_URL, milestone }) {
   return (
     <>
       <PageHead
-        title="Manage Milstone"
+        title="Manage Milestone"
         description="Here you can manage your LinkFree milestone"
       />
 

stories/components/form/DropDown.stories.js

@@ -1,7 +1,7 @@
-import DropDown from "@components/form/DropDown";
+import Select from "@components/form/Select";
 
 export default {
-  component: DropDown
+  component: Select
 };
 
 const options = [
@@ -13,10 +13,10 @@ const options = [
 
 export const Basic = {
   args: {
-    eventType: 3,
+    value: 3,
     label: 'Test',
     options: options,
-    handleEventTypeChange: (e) => console.log(e.target.value),
+    onChange: (e) => console.log(e.target.value),
     className: ''
   }
 };

tests/events.spec.js

@@ -10,7 +10,7 @@ test("Click on events profile in navbar navigates to events page", async ({
     .getByRole("navigation")
     .getByRole("link", { name: "Events" })
     .click();
-  await expect(page).toHaveURL("/events");
+  await expect(page).toHaveURL(/\/events/);
 });
 
 test("Events has title", async ({ page }) => {