Add Autocomplete to Form Fields

[Jonri2]

This PR implements autocomplete for the Add Section Form and the Add Non-Teaching Load form. To test, click on a section. Number, Section, Name, Instructional Method, and Room have regular autocomplete and Prefix and Instructor have multiple autocomplete (meaning more than 1 value can be selected). You should be able to enter a value that is not an option in any of the autocomplete fields and it should work as expected. At the moment, multiple rooms are not supported but I anticipate fixing that in a future PR. Let me know what you guys think!

[Jonri2]

I have one question and also when I add multiple professors, I can't click submit because the popover goes off of the screen.

Hmm... on my machine there's a scroll bar so I can just scroll down when there are multiple professors. Do you have any suggestions on how to stop it from going off the screen?

[charkour]

Initially, I'm not sure. Is there a scroll bar on the popover form?

[Jonri2]

I'm not sure. Is there a scroll bar on the popover form?

Yes

[charkour]

Okay, I'll check it out and see if I can get the scroll bar to show up.

[Jonri2]

diff --git a/client-course-schedulizer/src/components/reuseables/Schedule/Schedule.tsx b/client-course-schedulizer/src/components/reuseables/Schedule/Schedule.tsx
index af9e3c8..dc29801 100644
--- a/client-course-schedulizer/src/components/reuseables/Schedule/Schedule.tsx
+++ b/client-course-schedulizer/src/components/reuseables/Schedule/Schedule.tsx
@@ -119,7 +119,7 @@ const ScheduleBase = ({ calendarHeaders, groupedEvents, ...calendarOptions }: Sc
           horizontal: "left",
           vertical: "bottom",
         }}
-        PaperProps={{ style: { maxWidth: "90%", minWidth: "500px" } }}
+        PaperProps={{ style: { maxWidth: "90%", minWidth: "500px", overflowY: "scroll" } }}
         transformOrigin={{
           horizontal: "right",
           vertical: "top",

Does this work?

[charkour]

No, it does not fix it :(

[charkour]

It works if you add a maxHeight property to the PaperProps. overflowY: scroll does not need to be specified.

[Jonri2]

Alright, you should hopefully be good now