Sort pick list product search options alphabetically

src/screens/ActivePickListScreen.test.tsx

@@ -34,6 +34,17 @@ vi.mock('../hooks/dataHooks', () => ({
       created_at: 0,
       updated_at: 0,
     },
+    {
+      id: 'prod-3',
+      name: 'Apple Juice',
+      category: 'Drinks',
+      unit_type: 'unit',
+      bulk_name: 'box',
+      barcode: '333',
+      archived: false,
+      created_at: 0,
+      updated_at: 0,
+    },
   ],
   usePickList: () => ({ id: 'list-1', area_id: 'area-1', created_at: 0 }),
   useAreas: () => [{ id: 'area-1', name: 'Front Counter', created_at: 0, updated_at: 0 }],
@@ -100,6 +111,30 @@ describe('ActivePickListScreen product search', () => {
     });
   });
 
+  it('sorts the product options alphabetically', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <MemoryRouter initialEntries={['/pick-lists/1']}>
+        <Routes>
+          <Route path="/pick-lists/:id" element={<ActivePickListScreen />} />
+        </Routes>
+      </MemoryRouter>,
+    );
+
+    const combobox = screen.getByRole('combobox');
+    await user.click(combobox);
+
+    const listbox = await screen.findByRole('listbox');
+    const options = within(listbox).getAllByRole('option');
+
+    expect(options.map((option) => option.textContent)).toEqual([
+      'Apple Juice (Drinks)',
+      'Chips (Snacks)',
+      'Cola (Drinks)',
+    ]);
+  });
+
   it('updates an existing pick item when the same packaging is selected', async () => {
     pickItemsMock.mockReturnValue([
       {