From d766113f69a9a783f8c2eca3d5a77ff813ee63a6 Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Tue, 18 Apr 2023 11:19:20 +0200
Subject: [PATCH] :sparkles: Fixing select

---
 .../Components/DesignSystem/Select/index.tsx  | 25 ++++++++++++-------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/front/Components/DesignSystem/Select/index.tsx b/src/front/Components/DesignSystem/Select/index.tsx
index 3c0453c7..9a389c2d 100644
--- a/src/front/Components/DesignSystem/Select/index.tsx
+++ b/src/front/Components/DesignSystem/Select/index.tsx
@@ -26,6 +26,7 @@ type IState = {
 	isOpen: boolean;
 	listWidth: number;
 	listHeight: number;
+	selectedOption: IOption | null;
 };
 
 export default class Select extends React.Component<IProps, IState> {
@@ -39,13 +40,14 @@ export default class Select extends React.Component<IProps, IState> {
 			isOpen: false,
 			listHeight: 0,
 			listWidth: 0,
+			selectedOption: null,
 		};
 		this.toggle = this.toggle.bind(this);
 		this.onSelect = this.onSelect.bind(this);
 	}
 
 	public override render(): JSX.Element {
-		const selectedOption = this.props.selectedOption;
+		const selectedOption = this.state.selectedOption ?? this.props.selectedOption;
 		return (
 			<div className={classNames(classes["root"], this.props.className)} ref={this.rootRef}>
 				<label
@@ -54,19 +56,21 @@ export default class Select extends React.Component<IProps, IState> {
 					onClick={this.toggle}
 					data-border-right-collapsed={this.props.hasBorderRightCollapsed}>
 					<div className={classNames(classes["container-input"])}>
-						<>
-							{selectedOption?.icon && (
+						{selectedOption && (
+							<>
 								<span className={classNames(classes["icon"], classes["token-icon"])}>{selectedOption?.icon}</span>
-							)}
-							<Typography typo={ITypo.P_18}>
-								<span className={classes["text"]}>{selectedOption?.label}</span>
-							</Typography>
-							<div className={classes["placeholder"]} data-open={selectedOption && true}>
+								<Typography typo={ITypo.P_18}>
+									<span className={classes["text"]}>{selectedOption?.label}</span>
+								</Typography>
+							</>
+						)}
+						{!selectedOption && (
+							<div className={classes["placeholder"]} data-open={(selectedOption ? true : false).toString()}>
 								<Typography typo={ITypo.NAV_INPUT_16}>
 									<span className={classes["text"]}>{this.props.placeholder ?? ""}</span>
 								</Typography>
 							</div>
-						</>
+						)}
 					</div>
 					<Image className={classes["chevron-icon"]} data-open={this.state.isOpen} src={ChevronIcon} alt="chevron icon" />
 				</label>
@@ -135,6 +139,9 @@ export default class Select extends React.Component<IProps, IState> {
 
 	private onSelect(option: IOption, e: React.MouseEvent<HTMLLIElement, MouseEvent>) {
 		this.props.onChange && this.props.onChange(option);
+		this.setState({
+			selectedOption: option,
+		});
 		this.toggle(e);
 	}
 }