fix: allow to uncheck in checkboxOne

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();
 			});
 		});

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} />

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();

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)