Feature/leo3friedman/dropdown keyboard interactable

frontend/src/components/Dropdown.module.css

@@ -1,53 +1,26 @@
-.dropDown {
-  cursor: pointer;
-  background-color: white;
-  font-size: 16px;
-  color: var(--color-ccidc-placeholder);
-  height: 40px;
-  width: 460px;
-  border-radius: 4px;
-  border: 1px solid #d8d8d8;
+.select {
+  padding: 0.5rem 1rem;
+  width: 100%;
   background-image: url("../assets/dropDownIcon.svg");
   background-repeat: no-repeat, repeat;
   background-position:
     right 0.7em top 50%,
     0 0;
-}
-
-.dpContent {
-  position: relative;
-  top: 25%;
-  width: 100%;
-  background: white;
-  gap: 1em;
-  border: 1px solid #d8d8d8;
-  font-size: 16px;
-}
-
-.dpItem {
-  padding: 10px;
-  border: 0.5px solid #d8d8d8;
-  color: black;
-  cursor: pointer;
-}
-
-.selectOne {
-  margin-left: 15px;
-  margin-top: 10px;
-}
+  font: var(--font-body);
+  border-color: #d8d8d8;
+  border-radius: 0.25rem;
 
-.selectedOption {
-  color: black;
-  margin-left: 15px;
-  margin-top: 10px;
+  /* hide arrow for Firefox */
+  -moz-appearance: none;
+  /* hide arrow for Chrome */
+  -webkit-appearance: none;
 }
 
-.dpItem:hover {
-  background-color: #ebebeb;
+/* hide arrow for IE10 */
+.select::-ms-expand {
+  display: none;
 }
 
-@media (max-width: 1250px) {
-  .dropDown {
-    width: 330px;
-  }
+.select.unselected {
+  color: #b4b4b4;
 }

frontend/src/components/Dropdown.tsx

@@ -2,55 +2,49 @@ import { useState } from "react";
 
 import styles from "./Dropdown.module.css";
 
-export function Dropdown(props: {
+type DropdownProps = {
   options: string[];
-  onSelect: (value: string) => void;
+  onSelect?: (value: string) => void;
   required?: boolean;
-}) {
-  const [selected, setSelected] = useState("Select One");
-  const [isActive, setIsActive] = useState(false);
+};
 
-  const handleOptionClick = (option: string) => {
+export function Dropdown(props: DropdownProps) {
+  const { options, onSelect, required } = props;
+
+  // default value must be "" for required prop to work, https://stackoverflow.com/a/6048891
+  const defaultSelected = "";
+
+  const [selected, setSelected] = useState(defaultSelected);
+
+  function onSelectChange(event: React.FormEvent) {
+    const element = event.target as HTMLSelectElement;
+    const option = element.value;
     setSelected(option);
-    setIsActive(false);
-    props.onSelect(option);
-  };
+    if (onSelect) onSelect(option);
+  }
 
   return (
-    <div
-      className={styles.dropDown}
-      onClick={() => {
-        setIsActive(!isActive);
-      }}
-      role="button"
-      tabIndex={0}
-      onKeyDown={() => {
-        setIsActive(!isActive);
-      }}
+    <select
+      className={`${styles.select} ${selected === defaultSelected ? styles.unselected : ""}`}
+      onChange={onSelectChange}
+      required={required}
+      defaultValue={defaultSelected}
     >
-      <div className={selected === "Select One" ? styles.selectOne : styles.selectedOption}>
-        {selected ?? "Select One"}
-      </div>
-      {isActive && (
-        <div className={styles.dpContent}>
-          {props.options.map((option, index) => (
-            <div
-              onClick={() => {
-                handleOptionClick(option);
-              }}
-              className={styles.dpItem}
-              role="button"
-              tabIndex={0}
-              key={index}
-              onKeyDown={() => {
-                setIsActive(!isActive);
-              }}
-            >
-              {option}
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
+      <option
+        value={defaultSelected}
+        hidden={selected !== defaultSelected}
+        disabled
+        className={styles.defaultOption}
+      >
+        Select One
+      </option>
+
+      {options?.length &&
+        options.map((option) => (
+          <option key={option} value={option} className={styles.option}>
+            {option}
+          </option>
+        ))}
+    </select>
   );
 }

frontend/src/components/Step1.tsx

@@ -13,16 +13,6 @@ type Step1Props = {
 export function Step1({ onSubmit }: Step1Props) {
   const [email, setEmail] = useState<string>("");
   const [confirmEmail, setConfirmEmail] = useState<string>("");
-  const [gender, setGender] = useState("");
-  const [phoneType, setPhoneType] = useState("");
-
-  const handleGenderSelect = (option: string) => {
-    setGender(option);
-  };
-
-  const handlePhoneSelect = (option: string) => {
-    setPhoneType(option);
-  };
 
   const handleConfirmEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setConfirmEmail(e.target.value);
@@ -144,15 +134,7 @@ export function Step1({ onSubmit }: Step1Props) {
           <div className={styles.inputBox}>
             <label htmlFor="gender" className={`${styles.inputTitle} ${styles.dropdownLabel}`}>
               Gender<span className={styles.boldRed}>*</span>
-              <Dropdown options={genders} onSelect={handleGenderSelect}></Dropdown>
-              <input
-                className={styles.customDropDown}
-                type="text"
-                id="gender"
-                name="gender"
-                defaultValue={gender}
-                required
-              ></input>
+              <Dropdown options={genders} required />
             </label>
           </div>
         </div>
@@ -185,15 +167,7 @@ export function Step1({ onSubmit }: Step1Props) {
           <div className={styles.inputBox}>
             <label htmlFor="phoneType" className={`${styles.inputTitle} ${styles.dropdownLabel}`}>
               Phone Type<span className={styles.boldRed}>*</span>
-              <Dropdown options={devices} onSelect={handlePhoneSelect}></Dropdown>
-              <input
-                className={styles.customDropDown}
-                type="text"
-                id="phoneType"
-                name="phoneType"
-                defaultValue={phoneType}
-                required
-              ></input>
+              <Dropdown options={devices} required />
             </label>
           </div>
           <div className={styles.inputBox}>

frontend/src/components/Step2.tsx

@@ -289,12 +289,6 @@ function ProfessionalAssociationSection() {
 }
 
 function NationalExamSection() {
-  const [exam, setExam] = useState("");
-
-  const handleExamSelect = (option: string) => {
-    setExam(option);
-  };
-
   return (
     <div>
       <div className={styles.formSection}>
@@ -310,15 +304,7 @@ function NationalExamSection() {
               className={`${styles.inputTitle} ${styles.dropdownLabel}`}
             >
               National Exam<span className={styles.boldRed}>*</span>
-              <Dropdown options={examList} onSelect={handleExamSelect}></Dropdown>
-              <input
-                className={styles.customDropDown}
-                type="text"
-                id="nationalExam"
-                name="nationalExam"
-                defaultValue={exam}
-                required
-              ></input>
+              <Dropdown options={examList} required />
             </label>
           </div>
           <div className={styles.inputBox}>
@@ -359,11 +345,6 @@ function NationalExamSection() {
 
 function ICCCourses() {
   const [courses, setCourses] = useState([{ id: 1 }]);
-  const [courseSelect, setCourseSelect] = useState("");
-
-  const handleCourseSelect = (option: string) => {
-    setCourseSelect(option);
-  };
 
   const addCourse = () => {
     setCourses((prevCourses) => [...prevCourses, { id: prevCourses.length + 1 }]);
@@ -418,16 +399,7 @@ function ICCCourses() {
                   >
                     Courses
                     <span className={styles.boldRed}>*</span>
-                    <Dropdown options={courseList} onSelect={handleCourseSelect}></Dropdown>
-                    {/* Add if dropDown Required */}
-                    <input
-                      className={styles.customDropDown}
-                      type="text"
-                      id={`iccCourse${index}`}
-                      name={`iccCourse${index}`}
-                      defaultValue={courseSelect}
-                      required
-                    ></input>
+                    <Dropdown options={courseList} required />
                   </label>
                 </div>
                 <div className={styles.inputBox}>

frontend/src/components/Step4.module.css

@@ -11,15 +11,8 @@
   padding-bottom: 30px;
 }
 
-@media (max-width: 1300px) {
-  .formRow {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-  .formRow .input {
-    width: 330px;
-  }
+.formRow .dropdownContainer {
+  width: 460px;
 }
 
 .sectionTitle {
@@ -65,6 +58,21 @@
   color: var(--color-ccidc-placeholder);
 }
 
+@media (max-width: 1300px) {
+  .formRow {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .formRow .input {
+    width: 330px;
+  }
+
+  .formRow .dropdownContainer {
+    width: 330px;
+  }
+}
+
 .line {
   border: 0.5px solid #d8d8d8;
   margin-top: 30px;

frontend/src/components/Step4.tsx

@@ -91,16 +91,9 @@ export const Step4: React.FC<StepProps> = ({ next }: StepProps) => {
 
             <label htmlFor="dropDown" className={styles.label}>
               Have you ever been convicted of a Felony?<span className={styles.red}>*</span>
-              <Dropdown options={["Yes", "No"]} onSelect={handleSelect}></Dropdown>
-              {/* Add if dropDown Required */}
-              <input
-                className={styles.customDropDown}
-                type="text"
-                id="dropDown"
-                name="dropDown"
-                value={selectedFelonyCharge}
-                required
-              ></input>
+              <div className={styles.dropdownContainer}>
+                <Dropdown options={["Yes", "No"]} onSelect={handleSelect} required />
+              </div>
             </label>
           </div>
 

frontend/src/components/Steps.module.css

@@ -229,11 +229,3 @@ ul {
 .dropdownLabel {
   position: relative;
 }
-.customDropDown {
-  position: absolute;
-  bottom: 0.5rem;
-  left: 0.5rem;
-  /* Forcefully hide */
-  opacity: 0;
-  pointer-events: none;
-}

frontend/src/pages/index.ts

@@ -2,15 +2,6 @@ import { Application } from "./Application.tsx";
 import { Candidates } from "./Candidates.tsx";
 import { Login } from "./Login.tsx";
 import { PrescreeningForm } from "./PrescreeningForm.tsx";
-import { TestCongratulations } from "./TestCongratulations.tsx";
 import { TestModals } from "./TestModals.tsx";
 import { ThankyouForApplying } from "./ThankyouForApplying.tsx";
-export {
-  Application,
-  Candidates,
-  TestCongratulations,
-  ThankyouForApplying,
-  PrescreeningForm,
-  Login,
-  TestModals,
-};
+export { Application, Candidates, ThankyouForApplying, PrescreeningForm, Login, TestModals };