Fix filter overflow + location chip-in-input pattern

- Price slider: overflow hidden on container prevents horizontal scrollbar
- Funeral type chips: overflow hidden on parent prevents clipping through
- Location: chip-in-input using Autocomplete multiple+freeSolo (real estate
  site pattern — chip with X sits inside the search field)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-03-31 16:16:39 +11:00
parent 89ba86565a
commit 477da7d801

View File

@@ -164,6 +164,8 @@ const chipScrollSx = {
gap: 1,
overflowX: 'auto',
flexWrap: 'nowrap',
mx: -0.5,
px: 0.5,
pb: 0.5,
'&::-webkit-scrollbar': { display: 'none' },
scrollbarWidth: 'none',
@@ -347,36 +349,37 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
<Typography variant="labelLg" sx={sectionHeadingSx}>
Location
</Typography>
{searchQuery.trim() && (
<Box sx={{ mb: 1 }}>
<Chip
label={searchQuery.trim()}
onDelete={() => onSearchChange('')}
variant="filled"
color="primary"
<Autocomplete
multiple
freeSolo
value={searchQuery.trim() ? [searchQuery.trim()] : []}
onChange={(_, newValue) => {
// Take the last entered value as the active search
const last = newValue[newValue.length - 1] ?? '';
onSearchChange(typeof last === 'string' ? last : '');
}}
options={[]}
renderInput={(params) => (
<TextField
{...params}
placeholder={searchQuery.trim() ? '' : 'Search a town or suburb...'}
size="small"
InputProps={{
...params.InputProps,
startAdornment: (
<>
<InputAdornment position="start" sx={{ ml: 0.5 }}>
<LocationOnOutlinedIcon
sx={{ color: 'text.secondary', fontSize: 18 }}
/>
</InputAdornment>
{params.InputProps.startAdornment}
</>
),
}}
/>
</Box>
)}
<TextField
placeholder="Search a town or suburb..."
value={searchQuery}
onChange={(e) => onSearchChange(e.target.value)}
onKeyDown={(e) => {
if (e.key === 'Enter' && onSearch) {
e.preventDefault();
onSearch(searchQuery);
}
}}
fullWidth
)}
size="small"
InputProps={{
startAdornment: (
<InputAdornment position="start">
<LocationOnOutlinedIcon sx={{ color: 'text.secondary', fontSize: 18 }} />
</InputAdornment>
),
}}
/>
</Box>
@@ -402,7 +405,7 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
<Divider />
{/* ── Funeral type ── */}
<Box>
<Box sx={{ overflow: 'hidden' }}>
<Typography variant="labelLg" sx={sectionHeadingSx}>
Funeral type
</Typography>
@@ -458,7 +461,7 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
<Typography variant="labelLg" sx={sectionHeadingSx}>
Price range
</Typography>
<Box sx={{ px: 1, mb: 1 }}>
<Box sx={{ px: 1, mb: 1, overflow: 'hidden' }}>
<Slider
value={filterValues.priceRange}
onChange={(_, newValue) =>