Solved a problem with the record page not being able to reload

src/components/Low/Select.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import {ComponentProps, useEffect, useState} from "react";
-import ReactSelect from "react-select";
+import ReactSelect, {GroupBase, StylesConfig} from "react-select";
 
 interface Option {
 	[key: string]: any;
@@ -16,9 +16,10 @@ interface Props {
 	placeholder?: string;
 	onChange: (value: Option | null) => void;
 	isClearable?: boolean;
+	styles?: StylesConfig<Option, boolean, GroupBase<Option>>;
 }
 
-export default function Select({value, defaultValue, options, placeholder, disabled, onChange, isClearable}: Props) {
+export default function Select({value, defaultValue, options, placeholder, disabled, onChange, styles, isClearable}: Props) {
 	const [target, setTarget] = useState<HTMLElement>();
 
 	useEffect(() => {
@@ -27,33 +28,39 @@ export default function Select({value, defaultValue, options, placeholder, disab
 
 	return (
 		<ReactSelect
-			className={clsx(
+			className={
-				"placeholder:text-mti-gray-cool border-mti-gray-platinum w-full rounded-full border bg-white px-4 py-4 text-sm font-normal focus:outline-none",
+				styles
-				disabled && "!bg-mti-gray-platinum/40 !text-mti-gray-dim cursor-not-allowed",
+					? undefined
-			)}
+					: clsx(
+							"placeholder:text-mti-gray-cool border-mti-gray-platinum w-full rounded-full border bg-white px-4 py-4 text-sm font-normal focus:outline-none",
+							disabled && "!bg-mti-gray-platinum/40 !text-mti-gray-dim cursor-not-allowed",
+					  )
+			}
 			options={options}
 			value={value}
-			onChange={onChange}
+			onChange={onChange as any}
 			placeholder={placeholder}
 			menuPortalTarget={target}
 			defaultValue={defaultValue}
-			styles={{
+			styles={
-				menuPortal: (base) => ({...base, zIndex: 9999}),
+				styles || {
-				control: (styles) => ({
+					menuPortal: (base) => ({...base, zIndex: 9999}),
-					...styles,
+					control: (styles) => ({
-					paddingLeft: "4px",
+						...styles,
-					border: "none",
+						paddingLeft: "4px",
-					outline: "none",
+						border: "none",
-					":focus": {
 						outline: "none",
-					},
+						":focus": {
-				}),
+							outline: "none",
-				option: (styles, state) => ({
+						},
-					...styles,
+					}),
-					backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
+					option: (styles, state) => ({
-					color: state.isFocused ? "black" : styles.color,
+						...styles,
-				}),
+						backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
-			}}
+						color: state.isFocused ? "black" : styles.color,
+					}),
+				}
+			}
 			isDisabled={disabled}
 			isClearable={isClearable}
 		/>

src/components/Navbar.tsx

@@ -31,6 +31,8 @@ export default function Navbar({user, path, navDisabled = false, focusMode = fal
 	const [disablePaymentPage, setDisablePaymentPage] = useState(true);
 	const [isTicketOpen, setIsTicketOpen] = useState(false);
 
+	const router = useRouter();
+
 	const disableNavigation = preventNavigation(navDisabled, focusMode);
 
 	const expirationDateColor = (date: Date) => {
@@ -59,7 +61,7 @@ export default function Navbar({user, path, navDisabled = false, focusMode = fal
 	return (
 		<>
 			<Modal isOpen={isTicketOpen} onClose={() => setIsTicketOpen(false)} title="Submit a ticket">
-				<TicketSubmission user={user} page={window.location.href} onClose={() => setIsTicketOpen(false)} />
+				<TicketSubmission user={user} page={router.asPath} onClose={() => setIsTicketOpen(false)} />
 			</Modal>
 
 			{user && (

src/pages/record.tsx

@@ -19,7 +19,7 @@ import Layout from "@/components/High/Layout";
 import clsx from "clsx";
 import {calculateBandScore} from "@/utils/score";
 import {BsBook, BsClipboard, BsHeadphones, BsMegaphone, BsPen} from "react-icons/bs";
-import Select from "react-select";
+import Select from "@/components/Low/Select";
 import useGroups from "@/hooks/useGroups";
 import {shouldRedirectHome} from "@/utils/navigation.disabled";
 import useAssignments from "@/hooks/useAssignments";
@@ -320,7 +320,6 @@ export default function History({user}: {user: User}) {
 									options={users.map((x) => ({value: x.id, label: `${x.name} - ${x.email}`}))}
 									defaultValue={{value: user.id, label: `${user.name} - ${user.email}`}}
 									onChange={(value) => setStatsUserId(value?.value)}
-									menuPortalTarget={document?.body}
 									styles={{
 										menuPortal: (base) => ({...base, zIndex: 9999}),
 										option: (styles, state) => ({
@@ -338,7 +337,6 @@ export default function History({user}: {user: User}) {
 										.map((x) => ({value: x.id, label: `${x.name} - ${x.email}`}))}
 									defaultValue={{value: user.id, label: `${user.name} - ${user.email}`}}
 									onChange={(value) => setStatsUserId(value?.value)}
-									menuPortalTarget={document?.body}
 									styles={{
 										menuPortal: (base) => ({...base, zIndex: 9999}),
 										option: (styles, state) => ({