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, gap: 1,
overflowX: 'auto', overflowX: 'auto',
flexWrap: 'nowrap', flexWrap: 'nowrap',
mx: -0.5,
px: 0.5,
pb: 0.5, pb: 0.5,
'&::-webkit-scrollbar': { display: 'none' }, '&::-webkit-scrollbar': { display: 'none' },
scrollbarWidth: 'none', scrollbarWidth: 'none',
@@ -347,36 +349,37 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
<Typography variant="labelLg" sx={sectionHeadingSx}> <Typography variant="labelLg" sx={sectionHeadingSx}>
Location Location
</Typography> </Typography>
{searchQuery.trim() && ( <Autocomplete
<Box sx={{ mb: 1 }}> multiple
<Chip freeSolo
label={searchQuery.trim()} value={searchQuery.trim() ? [searchQuery.trim()] : []}
onDelete={() => onSearchChange('')} onChange={(_, newValue) => {
variant="filled" // Take the last entered value as the active search
color="primary" 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" 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" size="small"
InputProps={{
startAdornment: (
<InputAdornment position="start">
<LocationOnOutlinedIcon sx={{ color: 'text.secondary', fontSize: 18 }} />
</InputAdornment>
),
}}
/> />
</Box> </Box>
@@ -402,7 +405,7 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
<Divider /> <Divider />
{/* ── Funeral type ── */} {/* ── Funeral type ── */}
<Box> <Box sx={{ overflow: 'hidden' }}>
<Typography variant="labelLg" sx={sectionHeadingSx}> <Typography variant="labelLg" sx={sectionHeadingSx}>
Funeral type Funeral type
</Typography> </Typography>
@@ -458,7 +461,7 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
<Typography variant="labelLg" sx={sectionHeadingSx}> <Typography variant="labelLg" sx={sectionHeadingSx}>
Price range Price range
</Typography> </Typography>
<Box sx={{ px: 1, mb: 1 }}> <Box sx={{ px: 1, mb: 1, overflow: 'hidden' }}>
<Slider <Slider
value={filterValues.priceRange} value={filterValues.priceRange}
onChange={(_, newValue) => onChange={(_, newValue) =>