Merge pull request #113 from beatz174-bit/codex/implement-close-functionality-for-mobile-dialog

Ensure mobile controls dialog closes reliably

e2e/picklist.spec.ts

@@ -209,6 +209,31 @@ test.describe('Active pick list', () => {
     await expect(page.getByText(/Qty:\s*1\s+unit/i)).toBeVisible();
   });
 
+  test('closes mobile controls with the close button and backdrop', async ({ page }) => {
+    await page.setViewportSize({ width: 390, height: 844 });
+
+    await navigateToNewPickList(page);
+    await addProductToPickList(page, additionalProduct);
+
+    const productRow = page
+      .getByText(additionalProduct, { exact: true })
+      .locator('xpath=ancestor::div[contains(@class, "MuiStack-root")]')
+      .first();
+    const controlsDialog = page.getByRole('dialog', { name: additionalProduct });
+
+    await productRow.click();
+    await expect(controlsDialog).toBeVisible();
+
+    await page.getByRole('button', { name: 'Close controls' }).click();
+    await expect(controlsDialog).toHaveCount(0);
+
+    await productRow.click();
+    await expect(controlsDialog).toBeVisible();
+
+    await page.locator('.MuiBackdrop-root').click({ position: { x: 10, y: 10 } });
+    await expect(controlsDialog).toHaveCount(0);
+  });
+
   test('toggles picked visibility and disables the filter when all items are picked', async ({ page }) => {
     await navigateToNewPickList(page);
     await addProductToPickList(page, secondaryProduct);

src/components/PickItemRow.tsx

@@ -60,6 +60,10 @@ export const PickItemRow = ({
     }
   };
 
+  const handleCloseControls = () => {
+    setIsControlsOpen(false);
+  };
+
   const handleRowKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
     if (!isNarrowScreen) return;
 
@@ -218,7 +222,7 @@ export const PickItemRow = ({
       {isNarrowScreen && (
         <Dialog
           open={isControlsOpen}
-          onClose={() => setIsControlsOpen(false)}
+          onClose={handleCloseControls}
           fullWidth
           maxWidth="xs"
           aria-labelledby="item-controls-title"
@@ -232,10 +236,7 @@ export const PickItemRow = ({
             </Typography>
             <IconButton
               aria-label="Close controls"
-              onClick={(event) => {
-                stopPropagation(event);
-                setIsControlsOpen(false);
-              }}
+              onClick={handleCloseControls}
             >
               <Close />
             </IconButton>