Merge pull request #121 from beatz174-bit/codex/fix-checkbox-behavior-in-product-pick-list

Prevent pick item checkbox from opening controls on mobile

src/components/PickItemRow.test.tsx

@@ -42,6 +42,10 @@ const baseProduct: Product = {
 };
 
 describe('PickItemRow', () => {
+  beforeEach(() => {
+    mockMatchMedia(false);
+  });
+
   it('keeps quantity inline with matching typography to the product name', () => {
     render(
       <PickItemRow
@@ -97,4 +101,48 @@ describe('PickItemRow', () => {
 
     expect(onDelete).toHaveBeenCalledTimes(1);
   });
+
+  it('does not open the controls dialog when toggling status on narrow screens', async () => {
+    mockMatchMedia(true);
+    const onStatusChange = vi.fn();
+    const user = userEvent.setup();
+
+    render(
+      <PickItemRow
+        item={baseItem}
+        product={baseProduct}
+        onIncrementQuantity={vi.fn()}
+        onDecrementQuantity={vi.fn()}
+        onToggleCarton={vi.fn()}
+        onStatusChange={onStatusChange}
+        onDelete={vi.fn()}
+      />,
+    );
+
+    await user.click(screen.getByRole('checkbox', { name: /toggle picked status/i }));
+
+    expect(onStatusChange).toHaveBeenCalledWith('picked');
+    expect(screen.queryByRole('dialog', { name: baseProduct.name })).not.toBeInTheDocument();
+  });
+
+  it('opens the controls dialog from the overflow button on narrow screens', async () => {
+    mockMatchMedia(true);
+    const user = userEvent.setup();
+
+    render(
+      <PickItemRow
+        item={baseItem}
+        product={baseProduct}
+        onIncrementQuantity={vi.fn()}
+        onDecrementQuantity={vi.fn()}
+        onToggleCarton={vi.fn()}
+        onStatusChange={vi.fn()}
+        onDelete={vi.fn()}
+      />,
+    );
+
+    await user.click(screen.getByRole('button', { name: /open item controls/i }));
+
+    expect(screen.getByRole('dialog', { name: baseProduct.name })).toBeVisible();
+  });
 });

src/components/PickItemRow.tsx

@@ -49,6 +49,11 @@ export const PickItemRow = ({
     onStatusChange(checked ? 'picked' : 'pending');
   };
 
+  const handleStatusChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    event.stopPropagation();
+    toggleStatus(event.target.checked);
+  };
+
   const closeDialogs = (event?: { stopPropagation?: () => void }) => {
     event?.stopPropagation?.();
     setIsConfirmOpen(false);
@@ -112,7 +117,9 @@ export const PickItemRow = ({
         <Checkbox
           edge="start"
           checked={item.status === 'picked'}
-          onChange={(event) => toggleStatus(event.target.checked)}
+          onChange={handleStatusChange}
+          onClick={(event) => event.stopPropagation()}
+          onKeyDown={(event) => event.stopPropagation()}
           inputProps={{ 'aria-label': 'Toggle picked status' }}
         />
         <Stack spacing={0.5} minWidth={0} flex={1}>