Merge pull request #137 from beatz174-bit/codex/fix-test-failures-in-managecategoriesscreen

Fix pick list and product select handling

src/components/ProductRow.tsx

@@ -7,7 +7,6 @@ import {
   DialogContent,
   DialogTitle,
   IconButton,
-  MenuItem,
   Stack,
   TextField,
   Typography,
@@ -106,15 +105,16 @@ export const ProductRow = ({ product, categories, onSave, onDelete }: ProductRow
             />
             <TextField
               select
+              SelectProps={{ native: true }}
               label="Category"
               value={formState.category}
               onChange={handleChange('category')}
               size="small"
             >
               {categories.map((cat) => (
-                <MenuItem key={cat} value={cat}>
+                <option key={cat} value={cat}>
                   {cat}
-                </MenuItem>
+                </option>
               ))}
             </TextField>
             {formState.barcode ? (

src/screens/ManageCategoriesScreen.test.tsx

@@ -1,7 +1,7 @@
 import { MemoryRouter } from 'react-router-dom';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { describe, expect, it, vi } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { ManageCategoriesScreen } from './ManageCategoriesScreen';
 
 const categoriesMock = [{ id: 'cat-1', name: 'Snacks', created_at: 0, updated_at: 0 }];

src/screens/PickListsScreen.tsx

@@ -10,7 +10,6 @@ import {
   ListItem,
   ListItemButton,
   ListItemText,
-  MenuItem,
   Stack,
   TextField,
   Typography,
@@ -68,11 +67,13 @@ export const PickListsScreen = () => {
 
   const saveEdit = async () => {
     if (!editingList || !areaId) return;
-    await db.pickLists.update(editingList.id, {
+    const listId = editingList.id;
-      area_id: areaId,
+    const trimmedNotes = notes.trim() || undefined;
-      notes: notes.trim() || undefined,
-    });
     closeEdit();
+    await db.pickLists.update(listId, {
+      area_id: areaId,
+      notes: trimmedNotes,
+    });
   };
 
   const deleteList = async (list: PickList) => {
@@ -136,21 +137,23 @@ export const PickListsScreen = () => {
         ))}
       </List>
 
-      <Dialog open={Boolean(editingList)} onClose={closeEdit} fullWidth>
+      {editingList ? (
+        <Dialog open onClose={closeEdit} fullWidth>
           <DialogTitle>Edit Pick List</DialogTitle>
           <DialogContent sx={{ pt: 1 }}>
             <Stack spacing={2} mt={1}>
               <TextField
                 select
+                SelectProps={{ native: true }}
                 fullWidth
                 label="Area"
                 value={areaId}
                 onChange={(event) => setAreaId(event.target.value)}
               >
                 {areas.map((area) => (
-                <MenuItem key={area.id} value={area.id}>
+                  <option key={area.id} value={area.id}>
                     {area.name}
-                </MenuItem>
+                  </option>
                 ))}
               </TextField>
               <TextField
@@ -169,6 +172,7 @@ export const PickListsScreen = () => {
             </Button>
           </DialogActions>
         </Dialog>
+      ) : null}
     </Container>
   );
 };