@inseefr/lunatic 3.8.1-rc.0 → 3.8.1-rc.1

package/src/components/Suggester/Suggester.tsx

@@ -15,6 +15,8 @@ export function Suggester(props: LunaticComponentProps<'Suggester'>) {
 	return <WrappedSuggester {...props} key={suggesterKey} />;
 }
 
+const ARBITRARY_ID = 'OTHER';
+
 export function WrappedSuggester({
 	storeName,
 	id,
@@ -44,7 +46,7 @@ export function WrappedSuggester({
 	// so we can break the rule of hooks here
 	const computeSelectedOptions = (): [SuggesterOptionType] | [] => {
 		if (arbitraryValue) {
-			return [{ id: 'OTHER', label: arbitraryValue, value: 'OTHER' }];
+			return [{ id: ARBITRARY_ID, label: arbitraryValue, value: ARBITRARY_ID }];
 		}
 		if (!value) {
 			return [];
@@ -154,14 +156,15 @@ export function WrappedSuggester({
 	useEffect(() => {
 		// Fix display issue (when handleChanges is called outside this component (in management mode, return to FORCED value by example)
 		// "value" does'nt match selectedOption's "id"
-		if (value && selectedOptions[0]?.id !== value) {
+		if (selectedOptions[0]?.id !== value) {
 			const actualSelection = computeSelectedOptions();
-			const selectedOptionsWithLabel = [
-				{
-					...actualSelection[0],
-					label: getLabelById(actualSelection[0]?.id),
-				},
-			] as [SuggesterOptionType];
+			const selectedOptionsWithLabel = actualSelection.map((selection) => {
+				if (selection.id === ARBITRARY_ID) return selection;
+				return {
+					...selection,
+					label: getLabelById(selection.id),
+				};
+			}) as [SuggesterOptionType];
 			setSelectedOptions(selectedOptionsWithLabel);
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps

package/src/components/Suggester/useSuggestions.ts

@@ -51,7 +51,7 @@ export function useStore({ storeName }: { storeName: string }) {
 		setStoreState: setState,
 		getLabelById: (id: any) => {
 			if (!id) return '';
-			return store.search?.getFieldsById(id).label ?? '';
+			return store.search?.getFieldsById(id)?.label ?? '';
 		},
 	};
 }