From 0baca8ce5cd9a977706f159a6a46d6b389231267 Mon Sep 17 00:00:00 2001
From: Eddy Chen <89349085+ecxyzzy@users.noreply.github.com>
Date: Mon, 4 Dec 2023 13:41:33 -0800
Subject: [PATCH] fix: grab review form fix from #375

Co-authored-by: Jacob Sommer <js0mmer@users.noreply.github.com>
---
 site/src/component/ReviewForm/ReviewForm.tsx | 25 +++++++++-----------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/site/src/component/ReviewForm/ReviewForm.tsx b/site/src/component/ReviewForm/ReviewForm.tsx
index 28c40023..a0f3c0bb 100644
--- a/site/src/component/ReviewForm/ReviewForm.tsx
+++ b/site/src/component/ReviewForm/ReviewForm.tsx
@@ -161,16 +161,15 @@ const ReviewForm: FC<ReviewFormProps> = (props) => {
   }
 
   // select instructor if in course context
-  const instructorSelect = props.course && <Form.Group controlId='instructor'>
+  const instructorSelect = props.course && <Form.Group>
     <Form.Label>Taken With</Form.Label>
-    <Form.Control as="select" name='instructor' id='instructor' required
-      onChange={(e) => (setProfessor(document.getElementsByName(e.target.value)[0].id))}>
-      <option disabled={true} selected value=''>Instructor</option>
-      {Object.keys(props.course?.instructorHistory!).map((ucinetid, i) => {
+    <Form.Control as="select" name='instructor' id='instructor' defaultValue='' required
+                  onChange={(e) => (setProfessor(e.target.value))}>
+      <option disabled={true} value=''>Instructor</option>
+      {Object.keys(props.course?.instructorHistory).map((ucinetid) => {
         const name = props.course?.instructorHistory[ucinetid].shortenedName;
         return (
-          // @ts-ignore name attribute isn't supported
-          <option key={'review-form-professor-' + i} name={name} id={ucinetid}>{name}</option>
+            <option key={ucinetid} value={ucinetid}>{name}</option>
         )
       })}
     </Form.Control>
@@ -183,18 +182,16 @@ const ReviewForm: FC<ReviewFormProps> = (props) => {
       Missing instructor
     </Form.Control.Feedback>
   </Form.Group>
-
   // select course if in professor context
   const courseSelect = props.professor && <Form.Group controlId='course'>
     <Form.Label>Course Taken</Form.Label>
-    <Form.Control as="select" name='course' id='course' required
-      onChange={(e) => (setCourse(document.getElementsByName(e.target.value)[0].id))}>
-      <option disabled={true} selected value=''>Course</option>
-      {Object.keys(props.professor?.courseHistory!).map((courseID, i) => {
+    <Form.Control as="select" name='course' id='course' defaultValue='' required
+                  onChange={(e) => (setCourse(e.target.value))}>
+      <option disabled={true} value=''>Course</option>
+      {Object.keys(props.professor?.courseHistory).map((courseID) => {
         const name = props.professor?.courseHistory[courseID].department + ' ' + props.professor?.courseHistory[courseID].courseNumber;
         return (
-          // @ts-ignore name attribute isn't supported
-          <option key={'review-form-course-' + i} name={name} id={courseID}>{name}</option>
+            <option key={courseID} value={courseID}>{name}</option>
         )
       })}
     </Form.Control>