🐛 Fix multi select menu showing when empty

src/front/Components/DesignSystem/MultiSelect/index.tsx

@@ -15,24 +15,25 @@ type IProps = {
 	defaultValue?: PropsValue<IOption>;
 	value?: PropsValue<IOption>;
 	isMulti?: boolean;
-	shouldCloseMenuOnSelect?: boolean;
+	shouldCloseMenuOnSelect: boolean;
 	isOptionDisabled?: (option: IOption, selectValue: Options<IOption>) => boolean;
 };
 type IState = {
-	isSelectedOption: boolean;
 	isFocused: boolean;
+	selectedOptions: MultiValue<IOption>;
 };
 
 export default class MultiSelect extends React.Component<IProps, IState> {
 	public static defaultProps: Partial<IProps> = {
 		placeholder: "Sélectionner une option...",
+		shouldCloseMenuOnSelect: false,
 	};
 
 	constructor(props: IProps) {
 		super(props);
 		this.state = {
-			isSelectedOption: this.props.defaultValue ? true : false,
 			isFocused: false,
+			selectedOptions: [],
 		};
 		this.onChange = this.onChange.bind(this);
 		this.onEmptyResearch = this.onEmptyResearch.bind(this);
@@ -42,12 +43,12 @@ export default class MultiSelect extends React.Component<IProps, IState> {
 	public override render(): JSX.Element {
 		return (
 			<div className={classes["root"]}>
-				<div className={classNames(classes["label-container"], this.state.isSelectedOption && classes["active"])}>
+				<div className={classNames(classes["label-container"], this.state.selectedOptions.length >= 1 && classes["active"])}>
 					{this.props.label && <div className={classes["label"]}>{this.props.label}</div>}
 					{this.props.placeholder && (
 						<div
 							className={classes["placeholder"]}
-							data-selected={(this.state.isFocused || this.state.isSelectedOption).toString()}>
+							data-selected={(this.state.isFocused || this.state.selectedOptions.length >= 1).toString()}>
 							<Typography typo={ITypo.NAV_INPUT_16}>{this.props.placeholder}</Typography>
 						</div>
 					)}
@@ -72,6 +73,17 @@ export default class MultiSelect extends React.Component<IProps, IState> {
 		);
 	}
 
+	public override componentDidMount(): void {
+		if (this.props.defaultValue) {
+			if (Array.isArray(this.props.defaultValue)) {
+				this.setState({ selectedOptions: this.props.defaultValue });
+			}
+			if ("label" in this.props.defaultValue) {
+				this.setState({ selectedOptions: [this.props.defaultValue] });
+			}
+		}
+	}
+
 	private onFocus() {
 		this.setState({ isFocused: true });
 	}
@@ -82,10 +94,15 @@ export default class MultiSelect extends React.Component<IProps, IState> {
 
 	private onChange(newValue: MultiValue<IOption>, actionMeta: ActionMeta<IOption>) {
 		this.props.onChange && this.props.onChange(newValue, actionMeta);
-		this.setState({ isSelectedOption: newValue.length > 0 });
+		this.setState({
+			selectedOptions: newValue,
+		});
 	}
 
 	private onEmptyResearch() {
-		return "Aucune option correspondante";
+		if (this.state.selectedOptions.length === this.props.options.length) {
+			return null;
+		}
+		return "Aucune option trouvée";
 	}
 }

src/front/Components/Layouts/Folder/CreateFolder/index.tsx

@@ -112,6 +112,10 @@ export default class CreateFolder extends BasePage<IProps, IState> {
 										options={this.collaboratorsOptions}
 										placeholder="Sélectionner les collaborateurs pouvant accéder au dossier"
 										onChange={this.onCollaboratorsChange}
+										defaultValue={{
+											label: "John Doe",
+											value: "john_doe",
+										}}
 									/>
 								</div>
 							)}