Merge pull request #2086 from LightOfHeaven1994/RHINENG-8416

fix(RHINENG-8416): Do not open menu on checkbox click
RedHatInsights · Oct 25, 2024 · 1cebfbb · 1cebfbb
2 parents 1fbd347 + e9c0db3
commit 1cebfbb
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 22 deletions.
diff --git a/packages/components/src/BulkSelect/BulkSelect.test.js b/packages/components/src/BulkSelect/BulkSelect.test.js
@@ -141,10 +141,12 @@ describe('BulkSelect', () => {
       await act(async () => {
         await userEvent.click(screen.getByRole('checkbox', { name: 'Select all' }));
       });
-      act(() => {
-        userEvent.click(screen.getByRole('button', { expanded: true }));
-      });
       expect(onSelect).toHaveBeenCalled();
+
+      await act(async () => {
+        await userEvent.click(screen.getByRole('button'));
+      });
+      expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'true');
       expect(otherAction).not.toHaveBeenCalled();
     });
 

diff --git a/packages/components/src/BulkSelect/BulkSelect.tsx b/packages/components/src/BulkSelect/BulkSelect.tsx
@@ -83,25 +83,18 @@ const BulkSelect: React.FunctionComponent<BulkSelectProps> = ({
                 toggleProps?.children
               ) : (
                 <Fragment key="split-checkbox">
-                  {hasError ? (
-                    <MenuToggleCheckbox
-                      id={id ? `${id}-toggle-checkbox` : 'toggle-checkbox'}
-                      aria-label="Select all"
-                      onChange={onSelect}
-                      isChecked={checked}
-                      ouiaId={checkboxOuiaId ?? 'BulkSelectCheckbox'}
-                    />
-                  ) : (
-                    <MenuToggleCheckbox
-                      id={id ? `${id}-toggle-checkbox` : 'toggle-checkbox'}
-                      aria-label="Select all"
-                      onChange={onSelect}
-                      isChecked={checked}
-                      ouiaId={checkboxOuiaId ?? 'BulkSelectCheckbox'}
-                    >
-                      {count ? `${count} selected` : ''}
-                    </MenuToggleCheckbox>
-                  )}
+                  <MenuToggleCheckbox
+                    id={id ? `${id}-toggle-checkbox` : 'toggle-checkbox'}
+                    aria-label="Select all"
+                    onChange={(checked, event) => {
+                      setIsOpen(false);
+                      onSelect?.(checked, event);
+                    }}
+                    isChecked={checked}
+                    ouiaId={checkboxOuiaId ?? 'BulkSelectCheckbox'}
+                  >
+                    {!hasError && count ? `${count} selected` : ''}
+                  </MenuToggleCheckbox>
                 </Fragment>
               )}
             </MenuToggle>