fix(choice-group): prevent double change events and unify card click behavior #504 (#505)

* fix(choice-group): prevent double change events and unify card click behavior #504

* fix(choice-group): fix ChoiceGroupItem test #504

* fix(choice-group): add more test to cover the line coverage #504

Author: airikej

src/tedi/components/form/choice-group/components/choice-group-item/choice-group-item.spec.tsx

@@ -33,33 +33,27 @@ describe('ChoiceGroupItem', () => {
 
   it('renders the radio input correctly', () => {
     renderWithContext();
-    const radioInput = screen.getByRole('radio', { name: 'Test Label' });
+    const radioInput = screen.getByLabelText('Test Label');
     expect(radioInput).toBeInTheDocument();
+    expect(radioInput).toHaveAttribute('type', 'radio');
   });
 
   it('renders the checkbox input correctly when type is checkbox', () => {
     renderWithContext({ type: 'checkbox' });
-    const checkboxInput = screen.getByRole('checkbox', { name: 'Test Label' });
+    const checkboxInput = screen.getByLabelText('Test Label');
     expect(checkboxInput).toBeInTheDocument();
+    expect(checkboxInput).toHaveAttribute('type', 'checkbox');
   });
 
   it('renders the card variant correctly', () => {
     renderWithContext({ variant: 'card' });
-    const cardInput = screen.getByRole('radio', { name: 'Test Label' });
-    expect(cardInput).toBeInTheDocument();
-  });
-
-  it('calls onChange handler when input is clicked', () => {
-    const onChange = jest.fn();
-    renderWithContext({ onChange }, { currentValue: '', name: 'test-name', onChange, inputType: 'radio' });
-    const radioInput = screen.getByRole('radio', { name: 'Test Label' });
-    fireEvent.click(radioInput);
-    expect(onChange).toHaveBeenCalledWith('test-value', true);
+    const input = screen.getByLabelText('Test Label');
+    expect(input).toBeInTheDocument();
   });
 
   it('renders with disabled state correctly', () => {
     renderWithContext({ disabled: true });
-    const radioInput = screen.getByRole('radio', { name: 'Test Label' });
+    const radioInput = screen.getByLabelText('Test Label');
     expect(radioInput).toBeDisabled();
   });
 
@@ -76,20 +70,9 @@ describe('ChoiceGroupItem', () => {
     expect(indicator).toBeInTheDocument();
   });
 
-  it('calls onChange handler when card input is clicked', () => {
-    const onChange = jest.fn();
-    renderWithContext(
-      { variant: 'card', onChange },
-      { currentValue: '', name: 'test-name', onChange, inputType: 'radio' }
-    );
-    const cardInput = screen.getByRole('radio', { name: 'Test Label' });
-    fireEvent.click(cardInput);
-    expect(onChange).toHaveBeenCalledWith('test-value', true);
-  });
-
   it('renders the card variant with disabled state correctly', () => {
     renderWithContext({ variant: 'card', disabled: true });
-    const cardInput = screen.getByRole('radio', { name: 'Test Label' });
+    const cardInput = screen.getByLabelText('Test Label');
     expect(cardInput).toBeDisabled();
   });
 
@@ -99,4 +82,47 @@ describe('ChoiceGroupItem', () => {
     const helperText = screen.getByText('Helper text');
     expect(helperText).toBeInTheDocument();
   });
+
+  it('calls onChange handler when label is clicked', () => {
+    const onChange = jest.fn();
+    renderWithContext({ onChange }, { currentValue: '', name: 'test-name', onChange, inputType: 'radio' });
+    const label = screen.getByText('Test Label');
+    fireEvent.click(label);
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it('calls onChange handler when card is clicked', () => {
+    const onChange = jest.fn();
+    renderWithContext(
+      { variant: 'card', onChange },
+      { currentValue: '', name: 'test-name', onChange, inputType: 'radio' }
+    );
+
+    const card = screen.getByText('Test Label');
+    fireEvent.click(card);
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it('programmatically clicks the input when card background is clicked', () => {
+    renderWithContext({ variant: 'card' });
+
+    const input = screen.getByLabelText('Test Label') as HTMLInputElement;
+    const clickSpy = jest.spyOn(input, 'click');
+    const card = input.closest('.tedi-choice-group-item') as HTMLElement;
+    fireEvent.click(card);
+
+    expect(clickSpy).toHaveBeenCalledTimes(1);
+    clickSpy.mockRestore();
+  });
+
+  it('does NOT programmatically click input when clicking the native input directly', () => {
+    const mockInputClick = jest.fn();
+    const mockInput = { click: mockInputClick } as unknown as HTMLInputElement;
+
+    jest.spyOn(document, 'getElementById').mockReturnValue(mockInput);
+    renderWithContext({ variant: 'card' });
+    const input = screen.getByLabelText('Test Label');
+    fireEvent.click(input);
+    expect(mockInputClick).not.toHaveBeenCalled();
+  });
 });

src/tedi/components/form/choice-group/components/choice-group-item/choice-group-item.tsx

@@ -83,16 +83,17 @@ export const ChoiceGroupItem = (props: ExtendedChoiceGroupItemProps): React.Reac
 
   const InputComponent = type === 'radio' ? Radio : Checkbox;
 
-  const handleClick = (e: React.MouseEvent) => {
-    if ((e.target as HTMLElement).tagName === 'LABEL') return;
-    if (!disabled && variant === 'card') {
-      onChangeHandler(value, !isChecked);
-    }
-  };
+  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (disabled || variant !== 'card') return;
+
+    const target = e.target as HTMLElement;
+    if (target.closest('input, label')) return;
 
+    document.getElementById(id)?.click();
+  };
   return (
     <Col {...colProps} className={ColumnBEM}>
-      <div className={ChoiceGroupItemBEM} onClick={handleClick}>
+      <div className={ChoiceGroupItemBEM} onClick={handleClick} role={type} aria-checked={isChecked}>
         {variant === 'default' || showIndicator ? (
           <InputComponent
             id={id}
@@ -125,7 +126,6 @@ export const ChoiceGroupItem = (props: ExtendedChoiceGroupItemProps): React.Reac
               checked={isChecked}
               defaultChecked={currentValue === undefined ? props.defaultChecked : undefined}
               onChange={(e) => {
-                e.stopPropagation();
                 onChangeHandler(value, e.target.checked);
               }}
               className={styles['tedi-choice-group-item__input']}