From 9b332a9154799b0f793c9034cb4b50492707fd92 Mon Sep 17 00:00:00 2001
From: Quentin Ruhier <quentin.ruhier@insee.fr>
Date: Tue, 10 Dec 2024 11:21:34 +0100
Subject: [PATCH 1/2] fix: allow to uncheck in checkboxOne

---
 .../shared/Radio/RadioOption.spec.tsx         | 55 +++++++++++++++++++
 src/components/shared/Radio/RadioOption.tsx   |  5 ++
 src/use-lunatic/props/propOptions.ts          |  5 ++
 3 files changed, 65 insertions(+)

diff --git a/src/components/shared/Radio/RadioOption.spec.tsx b/src/components/shared/Radio/RadioOption.spec.tsx
index 89db94aad..388373a65 100644
--- a/src/components/shared/Radio/RadioOption.spec.tsx
+++ b/src/components/shared/Radio/RadioOption.spec.tsx
@@ -25,6 +25,61 @@ describe('RadioOption', () => {
 		expect(onClickMock).toHaveBeenCalled();
 	});
 
+	it('does not allow to uncheck modality if checkboxStyle is not defined', () => {
+		const onClickMock = vi.fn();
+		render(
+			<RadioOption
+				id="radio-option"
+				label="Test Option"
+				onCheck={onClickMock}
+				onUncheck={onClickMock}
+				checked
+			/>
+		);
+
+		const option = screen.getByRole('radio');
+		fireEvent.click(option);
+		expect(onClickMock).not.toHaveBeenCalled();
+	});
+
+	it('does not allow to uncheck modality if checkboxStyle is false', () => {
+		const onClickMock = vi.fn();
+
+		render(
+			<RadioOption
+				id="radio-option"
+				label="Test Option"
+				onCheck={onClickMock}
+				onUncheck={onClickMock}
+				checkboxStyle={false}
+				checked
+			/>
+		);
+
+		const option = screen.getByRole('radio');
+		fireEvent.click(option);
+		expect(onClickMock).not.toHaveBeenCalled();
+	});
+
+	it('allows to uncheck modality if checkboxStyle = true and onUncheck', () => {
+		const onClickMock = vi.fn();
+
+		render(
+			<RadioOption
+				id="radio-option"
+				label="Test Option"
+				onCheck={onClickMock}
+				onUncheck={onClickMock}
+				checkboxStyle={true}
+				checked
+			/>
+		);
+
+		const option = screen.getByRole('radio');
+		fireEvent.click(option);
+		expect(onClickMock).toHaveBeenCalled();
+	});
+
 	it('sets the tabIndex to 0 when unchecked', () => {
 		const { getByRole } = render(
 			<RadioOption id="radio-option" label="Test Option" checked={false} />
diff --git a/src/components/shared/Radio/RadioOption.tsx b/src/components/shared/Radio/RadioOption.tsx
index d77dde195..ba74ff980 100644
--- a/src/components/shared/Radio/RadioOption.tsx
+++ b/src/components/shared/Radio/RadioOption.tsx
@@ -40,6 +40,7 @@ function LunaticRadioOption({
 	detailLabel,
 	detailValue,
 	onCheck,
+	onUncheck,
 }: Props) {
 	const divEl = useRef<HTMLDivElement>(null);
 	const isEnabled = !disabled && !readOnly;
@@ -48,6 +49,10 @@ function LunaticRadioOption({
 
 	const onClickOption = () => {
 		if (!isEnabled || !onCheck || checked) {
+			// for checkboxStyle=true (only used by CheckboxOne) , we allow uncheck
+			if (checkboxStyle && onUncheck) {
+				onUncheck();
+			}
 			return;
 		}
 		onCheck();
diff --git a/src/use-lunatic/props/propOptions.ts b/src/use-lunatic/props/propOptions.ts
index 30c219859..3bc49cf00 100644
--- a/src/use-lunatic/props/propOptions.ts
+++ b/src/use-lunatic/props/propOptions.ts
@@ -18,6 +18,7 @@ export type InterpretedOption = {
 	detailValue?: string | null;
 	onDetailChange?: (value: string) => void;
 	onCheck?: () => void;
+	onUncheck?: () => void;
 };
 
 /**
@@ -86,6 +87,10 @@ export function getOptionsProp(
 					{ name: definition.response.name, value: option.value },
 				]);
 			},
+			// for CheckboxOne, we allow uncheck
+			onUncheck: () => {
+				handleChanges([{ name: definition.response.name, value: null }]);
+			},
 			detailValue:
 				'detail' in option && option.detail
 					? variables.get(option.detail.response.name, iteration)

From e46af739e7bd6ef3ddbb932107047f5b0407f96c Mon Sep 17 00:00:00 2001
From: Quentin Ruhier <quentin.ruhier@insee.fr>
Date: Tue, 10 Dec 2024 11:34:55 +0100
Subject: [PATCH 2/2] test: fix e2e for unchecking in checkboxOne

---
 e2e/checkbox.spec.ts | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/e2e/checkbox.spec.ts b/e2e/checkbox.spec.ts
index 12b1d1454..6b77b042e 100644
--- a/e2e/checkbox.spec.ts
+++ b/e2e/checkbox.spec.ts
@@ -72,13 +72,11 @@ test.describe('Checkboxes', () => {
 			await expectCollectedData(page, 'Q2', '3');
 			await expectCollectedData(page, 'Q3', 'Bonjour');
 		});
-		test(`Clicking multiple time should not trigger onChange`, async ({
-			page,
-		}) => {
+		test(`Allow to uncheck modality`, async ({ page }) => {
 			await goToStory(page, 'components-checkboxone--default');
 			await expect(page.getByRole('radio', { name: 'oui' })).toBeVisible();
 			await page.getByRole('radio', { name: 'oui' }).click();
-			await expectChanges(page, 0, () => {
+			await expectChanges(page, 1, () => {
 				return page.getByRole('radio', { name: 'oui' }).click();
 			});
 		});