fix(ToggleButtonGroup): Fix enforced and exclusive props (#1572)

cengage · Nov 20, 2024 · b8364bb · b8364bb · github-actions · Nov 20, 2024
1 parent bb047dd
commit b8364bb
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 7 deletions.
diff --git a/.changeset/toggleButtonGroup.md b/.changeset/toggleButtonGroup.md
@@ -0,0 +1,5 @@
+---
+'react-magma-dom': patch
+---
+
+fix(ToggleButtonGroup): Fix `enforced` and `exclusive` props
diff --git a/packages/react-magma-dom/src/components/ToggleButtonGroup/ToggleButtonGroup.stories.tsx b/packages/react-magma-dom/src/components/ToggleButtonGroup/ToggleButtonGroup.stories.tsx
@@ -111,21 +111,25 @@ export const AlignmentExample = args => {
         aria-label="Left align"
         icon={<FormatAlignLeftIcon />}
         value="left"
+        testId="left"
       />
       <ToggleButton
         aria-label="Center align"
         icon={<FormatAlignCenterIcon />}
         value="center"
+        testId="center"
       />
       <ToggleButton
         aria-label="Right align"
         icon={<FormatAlignRightIcon />}
         value="right"
+        testId="right"
       />
       <ToggleButton
         aria-label="Justify align"
         icon={<FormatAlignJustifyIcon />}
         value="justify"
+        testId="justify"
       />
     </ToggleButtonGroup>
   );
@@ -146,7 +150,11 @@ export const DifferentToggleButtons = args => {
         value="settings"
       />
       <ToggleButton value="text">Text</ToggleButton>
-      <ToggleButton icon={<SettingsIcon />} value="iconAndText" size={ButtonSize.small}>
+      <ToggleButton
+        icon={<SettingsIcon />}
+        value="iconAndText"
+        size={ButtonSize.small}
+      >
         Icon and Text
       </ToggleButton>
     </ToggleButtonGroup>

diff --git a/packages/react-magma-dom/src/components/ToggleButtonGroup/ToggleButtonGroup.test.js b/packages/react-magma-dom/src/components/ToggleButtonGroup/ToggleButtonGroup.test.js
@@ -59,8 +59,10 @@ describe('ToggleButtonGroup', () => {
         );
 
         const buttonOne = getByTestId(testId);
+        // ensure that clicking either the button or child SVG works
+        const buttonOneSvg = buttonOne.children[0];
         expect(buttonOne).toHaveAttribute('aria-checked', 'false');
-        fireEvent.click(buttonOne);
+        fireEvent.click(buttonOneSvg);
         expect(buttonOne).toHaveAttribute('aria-checked', 'true');
         fireEvent.click(buttonOne);
         expect(buttonOne).toHaveAttribute('aria-checked', 'true');
@@ -81,10 +83,12 @@ describe('ToggleButtonGroup', () => {
         );
 
         const buttonOne = getByTestId(testId);
+        // ensure that clicking either the button or child SVG works
+        const buttonOneSvg = buttonOne.children[0];
         const buttonTwo = getByTestId(`${testId}-1`);
 
         expect(buttonOne).toHaveAttribute('aria-checked', 'false');
-        fireEvent.click(buttonOne);
+        fireEvent.click(buttonOneSvg);
         expect(buttonOne).toHaveAttribute('aria-checked', 'true');
         fireEvent.click(buttonTwo);
         expect(buttonOne).toHaveAttribute('aria-checked', 'false');
@@ -105,12 +109,14 @@ describe('ToggleButtonGroup', () => {
         );
 
         const buttonOne = getByTestId(testId);
+        // ensure that clicking either the button or child SVG works
+        const buttonOneSvg = buttonOne.children[0];
         const buttonTwo = getByTestId(`${testId}-1`);
 
         expect(buttonOne).toHaveAttribute('aria-checked', 'false');
-        fireEvent.click(buttonOne);
+        fireEvent.click(buttonOneSvg);
         expect(buttonOne).toHaveAttribute('aria-checked', 'true');
-        fireEvent.click(buttonOne);
+        fireEvent.click(buttonOneSvg);
         expect(buttonOne).toHaveAttribute('aria-checked', 'true');
         fireEvent.click(buttonTwo);
         expect(buttonOne).toHaveAttribute('aria-checked', 'false');
@@ -195,7 +201,7 @@ describe('ToggleButtonGroup', () => {
     );
 
     const buttonOne = getByTestId(testId);
-    
+
     expect(buttonOne).toHaveAttribute('aria-checked', 'true');
     fireEvent.click(buttonOne);
     expect(onChangeMock).toHaveBeenCalledTimes(1);

diff --git a/packages/react-magma-dom/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx b/packages/react-magma-dom/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
@@ -98,7 +98,7 @@ export const ToggleButtonGroup = React.forwardRef<
   }, [value]);
 
   function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
-    const { value: newSelectedValue } = event.target;
+    const { value: newSelectedValue } = event.currentTarget;
 
     const oneBtnSelected = selectedValues.length === 1;
     const newValueAlreadySelected = selectedValues.includes(newSelectedValue);