diff --git a/src/components/pages/ProvidersStep/ProvidersStep.tsx b/src/components/pages/ProvidersStep/ProvidersStep.tsx index a9f9992..6c4cb42 100644 --- a/src/components/pages/ProvidersStep/ProvidersStep.tsx +++ b/src/components/pages/ProvidersStep/ProvidersStep.tsx @@ -416,6 +416,8 @@ export const ProvidersStep: React.FC = ({ multiple freeSolo options={[]} + forcePopupIcon={false} + clearIcon={null} value={searchQuery.trim() ? [searchQuery.trim()] : []} inputValue={searchDraft} onInputChange={(_, newDraft, reason) => { @@ -443,7 +445,6 @@ export const ProvidersStep: React.FC = ({ key={key} label={option} size="small" - selected aria-label={`Current location: ${option}. Press delete to clear.`} {...chipProps} /> @@ -470,22 +471,38 @@ export const ProvidersStep: React.FC = ({ ), endAdornment: ( - + commitSearch(searchDraft)} - disabled={!searchDraft.trim()} + sx={{ + width: 28, + height: 28, + borderRadius: '50%', + bgcolor: 'primary.main', + color: 'primary.contrastText', + '&:hover': { bgcolor: 'primary.dark' }, + '&:focus-visible': { outline: 'none' }, + }} > - + ), }} /> )} - sx={{ mb: 1.5 }} + sx={{ + mb: 1.5, + // Kill the custom brand focus ring + border colour change on focus + '& .MuiOutlinedInput-root.Mui-focused': { + boxShadow: 'none', + '& .MuiOutlinedInput-notchedOutline': { + borderColor: 'var(--fa-color-neutral-300)', + borderWidth: 1, + }, + }, + }} /> {/* Control bar — filters + sort */} @@ -497,7 +514,11 @@ export const ProvidersStep: React.FC = ({ }} > {/* Filters */} - + {/* ── Location ── */} @@ -681,7 +702,7 @@ export const ProvidersStep: React.FC = ({ onClick={(e) => setSortAnchor(e.currentTarget)} aria-haspopup="listbox" aria-label={`Sort by ${SORT_OPTIONS.find((o) => o.value === sortBy)?.label ?? 'Recommended'}`} - sx={{ textTransform: 'none' }} + sx={{ textTransform: 'none', '&:focus-visible': { outline: 'none' } }} > Sort: