From 8f2c16a63a103070efc2ac824a10ea889a3fc360 Mon Sep 17 00:00:00 2001
From: Angela Zheng <92692008+AngelaZQ1@users.noreply.github.com>
Date: Fri, 9 Feb 2024 11:44:01 -0500
Subject: [PATCH] Select use placeholder (#705)

* use placeholder, change select border color

* update select colors

* remove dropdown indicator color

* remove styles
---
 packages/frontend/components/Form/Select.tsx  | 20 +++++++------------
 .../frontend/components/Plan/AddPlanModal.tsx |  4 ++--
 .../components/Plan/EditPlanModal.tsx         |  4 ++--
 .../Plan/PlanConcentrationsSelect.tsx         |  4 ++--
 4 files changed, 13 insertions(+), 19 deletions(-)

diff --git a/packages/frontend/components/Form/Select.tsx b/packages/frontend/components/Form/Select.tsx
index cb9806404..223f5e22b 100644
--- a/packages/frontend/components/Form/Select.tsx
+++ b/packages/frontend/components/Form/Select.tsx
@@ -25,8 +25,8 @@ type PlanSelectProps = {
   /** Are the field values numbers. */
   isNumeric?: boolean;
   isSearchable?: boolean;
-  /** An option in the select dropdown that indicates "no selection". */
-  noValueOptionLabel?: string;
+  /** The default text shown in the input box. */
+  placeholder?: string;
   /** Fuzzy options to use */
   useFuzzySearch?: boolean;
 };
@@ -41,7 +41,7 @@ export const PlanSelect: React.FC<PlanSelectProps> = ({
   rules,
   isNumeric,
   isSearchable,
-  noValueOptionLabel,
+  placeholder,
   useFuzzySearch,
 }) => {
   const filterOptions = useFuzzySearch
@@ -73,12 +73,6 @@ export const PlanSelect: React.FC<PlanSelectProps> = ({
     label: val,
   }));
 
-  let noValueOption;
-  if (noValueOptionLabel) {
-    noValueOption = { value: null, label: noValueOptionLabel };
-    selectOptions.unshift(noValueOption);
-  }
-
   const onChange = (option: any) => {
     let val = option ? option.value : null;
     onChangeSideEffect && onChangeSideEffect(val);
@@ -94,9 +88,9 @@ export const PlanSelect: React.FC<PlanSelectProps> = ({
   if (isNumeric) {
     selectedValue = value ? value.toString() : null;
   }
-  const selectedOption =
-    selectOptions.find((option: any) => option.value === selectedValue) ??
-    noValueOption;
+  const selectedOption = selectOptions.find(
+    (option: any) => option.value === selectedValue
+  );
 
   return (
     <FormControl isInvalid={error != null}>
@@ -113,7 +107,7 @@ export const PlanSelect: React.FC<PlanSelectProps> = ({
         onChange={onChange}
         value={selectedOption}
         isSearchable={isSearchable}
-        defaultValue={noValueOption}
+        placeholder={placeholder}
         filterOption={filterOptions}
         {...fieldRest}
       />
diff --git a/packages/frontend/components/Plan/AddPlanModal.tsx b/packages/frontend/components/Plan/AddPlanModal.tsx
index be612eed9..7f6163847 100644
--- a/packages/frontend/components/Plan/AddPlanModal.tsx
+++ b/packages/frontend/components/Plan/AddPlanModal.tsx
@@ -199,7 +199,7 @@ export const AddPlanModal: React.FC<AddPlanModalProps> = ({
                   <>
                     <PlanSelect
                       label="Catalog Year"
-                      noValueOptionLabel="Select a Catalog Year"
+                      placeholder="Select a Catalog Year"
                       name="catalogYear"
                       control={control}
                       options={extractSupportedMajorYears(supportedMajorsData)}
@@ -232,7 +232,7 @@ export const AddPlanModal: React.FC<AddPlanModalProps> = ({
                     />
                     <PlanSelect
                       label="Major"
-                      noValueOptionLabel="Select a Major"
+                      placeholder="Select a Major"
                       name="major"
                       control={control}
                       options={extractSupportedMajorNames(
diff --git a/packages/frontend/components/Plan/EditPlanModal.tsx b/packages/frontend/components/Plan/EditPlanModal.tsx
index 5cd524e38..9a6189aa5 100644
--- a/packages/frontend/components/Plan/EditPlanModal.tsx
+++ b/packages/frontend/components/Plan/EditPlanModal.tsx
@@ -225,7 +225,7 @@ export const EditPlanModal: React.FC<EditPlanModalProps> = ({ plan }) => {
                   <>
                     <PlanSelect
                       label="Catalog Year"
-                      noValueOptionLabel="Select a Catalog Year"
+                      placeholder="Select a Catalog Year"
                       name="catalogYear"
                       control={control}
                       options={extractSupportedMajorYears(supportedMajorsData)}
@@ -256,7 +256,7 @@ export const EditPlanModal: React.FC<EditPlanModalProps> = ({ plan }) => {
                     />
                     <PlanSelect
                       label="Major"
-                      noValueOptionLabel="Select a Major"
+                      placeholder="Select a Major"
                       name="major"
                       control={control}
                       options={extractSupportedMajorNames(
diff --git a/packages/frontend/components/Plan/PlanConcentrationsSelect.tsx b/packages/frontend/components/Plan/PlanConcentrationsSelect.tsx
index df610b93b..3c6f5adf5 100644
--- a/packages/frontend/components/Plan/PlanConcentrationsSelect.tsx
+++ b/packages/frontend/components/Plan/PlanConcentrationsSelect.tsx
@@ -24,8 +24,8 @@ export const PlanConcentrationsSelect: React.FC<
 
   return (
     <PlanSelect
-      label="Concentrations"
-      noValueOptionLabel="Select a Concentration"
+      label="Concentration"
+      placeholder="Select a Concentration"
       name="concentration"
       options={supportedMajor.concentrations}
       control={control}