From 9076d783a5e664959c9c9b0aa6b7004e12783a9a Mon Sep 17 00:00:00 2001
From: beatz174-bit <beatz174@gmail.com>
Date: Mon, 24 Nov 2025 11:29:23 +1000
Subject: [PATCH] Prevent checkbox opening narrow screen controls

---
 src/components/PickItemRow.test.tsx | 48 +++++++++++++++++++++++++++++
 src/components/PickItemRow.tsx      |  9 +++++-
 2 files changed, 56 insertions(+), 1 deletion(-)

diff --git a/src/components/PickItemRow.test.tsx b/src/components/PickItemRow.test.tsx
index 238c157..cb3e2d3 100644
--- a/src/components/PickItemRow.test.tsx
+++ b/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();
+  });
 });
diff --git a/src/components/PickItemRow.tsx b/src/components/PickItemRow.tsx
index 9b74bfd..ea26fe7 100644
--- a/src/components/PickItemRow.tsx
+++ b/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}>