From 477da7d8010a05d94131667449019a89e6ad636f Mon Sep 17 00:00:00 2001
From: Richie <richie.phillips@proton.me>
Date: Tue, 31 Mar 2026 16:16:39 +1100
Subject: [PATCH] Fix filter overflow + location chip-in-input pattern
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 .../pages/ProvidersStep/ProvidersStep.tsx     | 61 ++++++++++---------
 1 file changed, 32 insertions(+), 29 deletions(-)

diff --git a/src/components/pages/ProvidersStep/ProvidersStep.tsx b/src/components/pages/ProvidersStep/ProvidersStep.tsx
index ee76e41..669c006 100644
--- a/src/components/pages/ProvidersStep/ProvidersStep.tsx
+++ b/src/components/pages/ProvidersStep/ProvidersStep.tsx
@@ -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) =>