From 628634bd09097f85df7c9349b5d9934d7602dd24 Mon Sep 17 00:00:00 2001
From: Alice Dahan <lilice.dhn@gmail.com>
Date: Fri, 31 Jan 2025 18:32:55 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20permet=20de=20r=C3=A9initialiser=20un?=
 =?UTF-8?q?=20radio=20group?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/conversation/ChoicesInput.tsx  | 46 +++++++++++--------
 .../components/conversation/RuleInput.tsx     |  2 +-
 .../design-system/field/Radio/RadioGroup.tsx  |  7 +++
 3 files changed, 34 insertions(+), 21 deletions(-)

diff --git a/site/source/components/conversation/ChoicesInput.tsx b/site/source/components/conversation/ChoicesInput.tsx
index 1351bd16a..cd99493a3 100644
--- a/site/source/components/conversation/ChoicesInput.tsx
+++ b/site/source/components/conversation/ChoicesInput.tsx
@@ -51,11 +51,13 @@ export type Choice = ASTNode<'rule'> & {
 }
 
 export function MultipleAnswerInput<Names extends string = DottedName>({
-	choice,
+	choices,
 	type = 'radio',
+	autoFocus,
+	title,
 	...props
 }: {
-	choice: Choice
+	choices: Choice
 	type?: 'radio' | 'card' | 'toggle' | 'select'
 } & InputProps<Names>) {
 	const { t } = useTranslation()
@@ -68,14 +70,14 @@ export function MultipleAnswerInput<Names extends string = DottedName>({
 		return (
 			<Select
 				aria-labelledby={props['aria-labelledby'] || undefined}
-				label={props.title}
+				label={title}
 				onSelectionChange={handleChange}
 				defaultSelectedKey={defaultValue}
 				selectedKey={currentSelection}
 				// eslint-disable-next-line jsx-a11y/no-autofocus
-				autoFocus={props.autoFocus}
+				autoFocus={autoFocus}
 			>
-				{choice.children.map((node) => (
+				{choices.children.map((node) => (
 					<Item
 						key={`'${relativeDottedName(props.dottedName, node.dottedName)}'`}
 						textValue={node.title}
@@ -96,12 +98,12 @@ export function MultipleAnswerInput<Names extends string = DottedName>({
 				onChange={handleChange}
 				value={currentSelection ?? undefined}
 			>
-				{choice.children.map((node) => (
+				{choices.children.map((node) => (
 					<Fragment key={node.dottedName}>
 						<RadioCard
 							// eslint-disable-next-line jsx-a11y/no-autofocus
 							autoFocus={
-								props.autoFocus &&
+								autoFocus &&
 								defaultValue ===
 									`'${relativeDottedName(props.dottedName, node.dottedName)}'`
 							}
@@ -133,11 +135,11 @@ export function MultipleAnswerInput<Names extends string = DottedName>({
 			value={currentSelection ?? undefined}
 			aria-labelledby={props['aria-labelledby'] || undefined}
 		>
-			<RadioChoice
+			<RadioChoices
 				// eslint-disable-next-line jsx-a11y/no-autofocus
-				autoFocus={props.autoFocus}
+				autoFocus={autoFocus}
 				defaultValue={defaultValue}
-				choice={choice}
+				choices={choices}
 				rootDottedName={props.dottedName}
 				type={type}
 			/>
@@ -145,14 +147,14 @@ export function MultipleAnswerInput<Names extends string = DottedName>({
 	)
 }
 
-function RadioChoice<Names extends string = DottedName>({
-	choice,
+function RadioChoices<Names extends string = DottedName>({
+	choices,
 	defaultValue,
 	autoFocus,
 	rootDottedName,
 	type,
 }: {
-	choice: Choice
+	choices: Choice
 	defaultValue?: string
 	autoFocus?: boolean
 	rootDottedName: Names
@@ -162,7 +164,7 @@ function RadioChoice<Names extends string = DottedName>({
 
 	return (
 		<>
-			{choice.children.map((node) => (
+			{choices.children.map((node) => (
 				<Fragment key={node.dottedName}>
 					{' '}
 					{'children' in node ? (
@@ -184,11 +186,11 @@ function RadioChoice<Names extends string = DottedName>({
 							</H4>
 							<Spacing lg />
 							<StyledSubRadioGroup>
-								<RadioChoice
+								<RadioChoices
 									// eslint-disable-next-line jsx-a11y/no-autofocus
 									autoFocus={autoFocus}
 									defaultValue={defaultValue}
-									choice={node}
+									choices={node}
 									rootDottedName={rootDottedName}
 									type={type}
 								/>
@@ -238,7 +240,7 @@ function RadioChoice<Names extends string = DottedName>({
 					)}
 				</Fragment>
 			))}
-			{choice.canGiveUp && (
+			{choices.canGiveUp && (
 				<>
 					<Radio value={'non'}>{t('Aucun')}</Radio>
 				</>
@@ -331,12 +333,16 @@ export function useSelection<Names extends string = DottedName>({
 	useEffect(() => {
 		if (lastValue.current !== value) {
 			const newSelection = serializeValue(value)
-			if (newSelection && newSelection !== currentSelection && !missing) {
-				handleChange(newSelection)
+			if (currentSelection !== newSelection) {
+				setCurrentSelection(
+					!missing && newSelection != null && typeof newSelection === 'string'
+						? newSelection
+						: null
+				)
 			}
 			lastValue.current = value
 		}
-	}, [currentSelection, handleChange, value, missing])
+	}, [value, missing, currentSelection])
 
 	return { currentSelection, handleChange, defaultValue }
 }
diff --git a/site/source/components/conversation/RuleInput.tsx b/site/source/components/conversation/RuleInput.tsx
index 1574fe1c7..ae208427f 100644
--- a/site/source/components/conversation/RuleInput.tsx
+++ b/site/source/components/conversation/RuleInput.tsx
@@ -136,7 +136,7 @@ export default function RuleInput<Names extends string = DottedName>({
 			<>
 				<MultipleAnswerInput
 					{...commonProps}
-					choice={getOnePossibilityOptions(engineValue, dottedName)}
+					choices={getOnePossibilityOptions(engineValue, dottedName)}
 					type={type}
 				/>
 				{!hideDefaultValue && (
diff --git a/site/source/design-system/field/Radio/RadioGroup.tsx b/site/source/design-system/field/Radio/RadioGroup.tsx
index 4f1614d6b..7fb7de2d5 100644
--- a/site/source/design-system/field/Radio/RadioGroup.tsx
+++ b/site/source/design-system/field/Radio/RadioGroup.tsx
@@ -1,6 +1,7 @@
 import { useRadioGroup } from '@react-aria/radio'
 import { useRadioGroupState } from '@react-stately/radio'
 import { AriaRadioGroupProps } from '@react-types/radio'
+import { useEffect } from 'react'
 import { styled } from 'styled-components'
 
 import { RadioContext } from './Radio'
@@ -14,6 +15,12 @@ export function RadioGroup(props: RadioGroupProps) {
 	const state = useRadioGroupState(props)
 	const { radioGroupProps, labelProps } = useRadioGroup(props, state)
 
+	useEffect(() => {
+		if (!props.value) {
+			state.setSelectedValue('')
+		}
+	}, [props.value, state])
+
 	return (
 		<div
 			{...radioGroupProps}