From 7b126ac9dfc0a5901a93fb195abf176f79cf9015 Mon Sep 17 00:00:00 2001
From: Richie <richie.phillips@proton.me>
Date: Mon, 30 Mar 2026 22:15:25 +1100
Subject: [PATCH] CemeteryStep: autocomplete search replaces dropdown, lighter
 labels
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Select dropdown replaced with MUI Autocomplete (type-to-search
  with search icon) — scalable for large cemetery lists
- Heavy h5 headings replaced with body1 contextual text
- In production, parent can wire this to Google Places API

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../pages/CemeteryStep/CemeteryStep.tsx       | 100 ++++++++++--------
 1 file changed, 56 insertions(+), 44 deletions(-)

diff --git a/src/components/pages/CemeteryStep/CemeteryStep.tsx b/src/components/pages/CemeteryStep/CemeteryStep.tsx
index 1067349..65187d2 100644
--- a/src/components/pages/CemeteryStep/CemeteryStep.tsx
+++ b/src/components/pages/CemeteryStep/CemeteryStep.tsx
@@ -1,7 +1,9 @@
 import React from 'react';
 import Box from '@mui/material/Box';
+import Autocomplete from '@mui/material/Autocomplete';
 import TextField from '@mui/material/TextField';
-import MenuItem from '@mui/material/MenuItem';
+import SearchOutlinedIcon from '@mui/icons-material/SearchOutlined';
+import InputAdornment from '@mui/material/InputAdornment';
 import type { SxProps, Theme } from '@mui/material/styles';
 import { WizardLayout } from '../../templates/WizardLayout';
 import { ToggleButtonGroup } from '../../atoms/ToggleButtonGroup';
@@ -175,29 +177,36 @@ export const CemeteryStep: React.FC<CemeteryStepProps> = ({
         {/* ─── Own plot: tell us where ─── */}
         <Collapse in={showCemeteryForOwnPlot}>
           <Box sx={{ mb: 4 }}>
-            <Typography variant="h5" component="h2" sx={{ mb: 3 }}>
-              Tell us where the burial plot is located
+            <Typography variant="body1" color="text.secondary" sx={{ mb: 2 }}>
+              Tell us where the burial plot is located.
             </Typography>
 
-            <TextField
-              select
-              label="Cemetery"
-              value={values.selectedCemetery}
-              onChange={(e) => onChange({ ...values, selectedCemetery: e.target.value })}
-              placeholder="Select a cemetery"
+            <Autocomplete
+              options={cemeteries}
+              getOptionLabel={(option) => option.label}
+              value={cemeteries.find((c) => c.value === values.selectedCemetery) ?? null}
+              onChange={(_, option) =>
+                onChange({ ...values, selectedCemetery: option?.value ?? '' })
+              }
+              renderInput={(params) => (
+                <TextField
+                  {...params}
+                  placeholder="Search for a cemetery..."
+                  error={!!errors?.selectedCemetery}
+                  helperText={errors?.selectedCemetery}
+                  InputProps={{
+                    ...params.InputProps,
+                    startAdornment: (
+                      <InputAdornment position="start">
+                        <SearchOutlinedIcon sx={{ fontSize: 20, color: 'text.secondary' }} />
+                      </InputAdornment>
+                    ),
+                  }}
+                />
+              )}
+              noOptionsText="No cemeteries found"
               fullWidth
-              error={!!errors?.selectedCemetery}
-              helperText={errors?.selectedCemetery}
-            >
-              <MenuItem value="" disabled>
-                Select a cemetery
-              </MenuItem>
-              {cemeteries.map((c) => (
-                <MenuItem key={c.value} value={c.value}>
-                  {c.label}
-                </MenuItem>
-              ))}
-            </TextField>
+            />
           </Box>
         </Collapse>
 
@@ -220,32 +229,35 @@ export const CemeteryStep: React.FC<CemeteryStepProps> = ({
           </Box>
         </Collapse>
 
-        {/* ─── Preference: select cemetery ─── */}
+        {/* ─── Preference: search cemetery ─── */}
         <Collapse in={showCemeteryForPreference}>
           <Box sx={{ mb: 4 }}>
-            <Typography variant="h5" component="h2" sx={{ mb: 3 }}>
-              Select your preferred cemetery
-            </Typography>
-
-            <TextField
-              select
-              label="Cemetery"
-              value={values.selectedCemetery}
-              onChange={(e) => onChange({ ...values, selectedCemetery: e.target.value })}
-              placeholder="Select a cemetery"
+            <Autocomplete
+              options={cemeteries}
+              getOptionLabel={(option) => option.label}
+              value={cemeteries.find((c) => c.value === values.selectedCemetery) ?? null}
+              onChange={(_, option) =>
+                onChange({ ...values, selectedCemetery: option?.value ?? '' })
+              }
+              renderInput={(params) => (
+                <TextField
+                  {...params}
+                  placeholder="Search for a cemetery..."
+                  error={!!errors?.selectedCemetery}
+                  helperText={errors?.selectedCemetery}
+                  InputProps={{
+                    ...params.InputProps,
+                    startAdornment: (
+                      <InputAdornment position="start">
+                        <SearchOutlinedIcon sx={{ fontSize: 20, color: 'text.secondary' }} />
+                      </InputAdornment>
+                    ),
+                  }}
+                />
+              )}
+              noOptionsText="No cemeteries found"
               fullWidth
-              error={!!errors?.selectedCemetery}
-              helperText={errors?.selectedCemetery}
-            >
-              <MenuItem value="" disabled>
-                Select a cemetery
-              </MenuItem>
-              {cemeteries.map((c) => (
-                <MenuItem key={c.value} value={c.value}>
-                  {c.label}
-                </MenuItem>
-              ))}
-            </TextField>
+            />
           </Box>
         </Collapse>