🐛 Fixing select still open on page change

src/front/Components/DesignSystem/Form/SelectField/index.tsx

@@ -7,6 +7,7 @@ import React, { FormEvent, ReactNode } from "react";
 
 import Typography, { ITypo, ITypoColor } from "../../Typography";
 import classes from "./classes.module.scss";
+import { NextRouter, useRouter } from "next/router";
 
 type IProps = {
 	selectedOption?: IOption;
@@ -16,7 +17,7 @@ type IProps = {
 	placeholder?: string;
 	className?: string;
 	name: string;
-	disabled: boolean;
+	disabled?: boolean;
 	errors?: ValidationError;
 };
 
@@ -35,7 +36,11 @@ type IState = {
 	errors: ValidationError | null;
 };
 
-export default class SelectField extends React.Component<IProps, IState> {
+type IPropsClass = IProps & {
+	router: NextRouter;
+};
+
+class SelectFieldClass extends React.Component<IPropsClass, IState> {
 	private contentRef = React.createRef<HTMLUListElement>();
 	private rootRef = React.createRef<HTMLDivElement>();
 	private removeOnresize = () => {};
@@ -44,7 +49,7 @@ export default class SelectField extends React.Component<IProps, IState> {
 		disabled: false,
 	};
 
-	constructor(props: IProps) {
+	constructor(props: IPropsClass) {
 		super(props);
 		this.state = {
 			isOpen: false,
@@ -64,7 +69,7 @@ export default class SelectField extends React.Component<IProps, IState> {
 				<div
 					className={classNames(classes["root"], this.props.className)}
 					ref={this.rootRef}
-					data-disabled={this.props.disabled.toString()}
+					data-disabled={this.props.disabled?.toString()}
 					data-errored={(this.state.errors !== null).toString()}>
 					{selectedOption && <input type="text" defaultValue={selectedOption.value as string} name={this.props.name} hidden />}
 					<label
@@ -116,6 +121,23 @@ export default class SelectField extends React.Component<IProps, IState> {
 			</div>
 		);
 	}
+	public override componentDidMount(): void {
+		this.onResize();
+		this.removeOnresize = WindowStore.getInstance().onResize(() => this.onResize());
+
+		this.props.router.events.on("routeChangeStart", () => {
+			this.setState({
+				isOpen: false,
+				selectedOption: null,
+				listHeight: 0,
+				listWidth: 0,
+			});
+		});
+	}
+
+	public override componentWillUnmount() {
+		this.removeOnresize();
+	}
 
 	public override componentDidUpdate(prevProps: IProps) {
 		if (this.props.errors !== prevProps.errors) {
@@ -140,15 +162,6 @@ export default class SelectField extends React.Component<IProps, IState> {
 		return null;
 	}
 
-	public override componentDidMount(): void {
-		this.onResize();
-		this.removeOnresize = WindowStore.getInstance().onResize(() => this.onResize());
-	}
-
-	public override componentWillUnmount() {
-		this.removeOnresize();
-	}
-
 	private onResize() {
 		let listHeight = 0;
 		let listWidth = 0;
@@ -192,3 +205,8 @@ export default class SelectField extends React.Component<IProps, IState> {
 		);
 	}
 }
+
+export default function SelectField(props: IProps) {
+	const router = useRouter();
+	return <SelectFieldClass {...props} router={router} />;
+}

src/front/Components/Layouts/Collaborators/CollaboratorInformations/index.tsx

@@ -45,9 +45,9 @@ export default function CollaboratorInformations(props: IProps) {
 		setRoleModalOpened(false);
 		setSelectedOption({
 			value: userSelected?.office_role ? userSelected?.office_role?.uid : userSelected?.role?.uid,
-			label: userSelected?.office_role ? userSelected?.office_role?.name : userSelected?.role?.name!,
+			label: userSelected?.office_role ? userSelected?.office_role?.name : "Utilisateur restreint",
 		});
-	}, [userSelected?.office_role, userSelected?.role?.name, userSelected?.role?.uid]);
+	}, [userSelected?.office_role, userSelected?.role?.uid]);
 
 	const changeRole = useCallback(async () => {
 		await Users.getInstance().put(
@@ -133,7 +133,7 @@ export default function CollaboratorInformations(props: IProps) {
 			setUserSelected(user);
 			setSelectedOption({
 				value: user?.office_role ? user?.office_role?.uid : user?.role?.uid,
-				label: user?.office_role ? user?.office_role?.name : user?.role?.name!,
+				label: user?.office_role ? user?.office_role?.name : "Utilisateur restreint",
 			});
 		}
 
@@ -197,7 +197,6 @@ export default function CollaboratorInformations(props: IProps) {
 							})}
 							selectedOption={selectedOption!}
 							onChange={handleRoleChange}
-							disabled={userSelected?.role?.name === "super-admin"}
 						/>
 					</div>
 					{userSelected?.role?.name !== "super-admin" && (