fix: allow to uncheck in checkboxOne

InseeFr · Dec 10, 2024 · 9b332a9 · 9b332a9
1 parent f03d8bf
commit 9b332a9
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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)