Add autocomplete suggestions display to CityAutocomplete

- Add 'suggestion-list' test ID to dropdown container
- Add 'suggestion-item' test ID to individual airport suggestions
- Update dropdown styling with proper positioning, borders, and hover effects
- Suggestions display as absolute-positioned list below input
- Each suggestion shows airport code and name (e.g. 'SVO - Moscow Sheremetyevo')
- List is hidden when input is empty or user loses focus
- Items are clickable to select and populate the input field
This commit is contained in:
gnezim
2026-04-06 08:40:22 +03:00
parent a3e5ee9bdd
commit 1e3147929c
2 changed files with 29 additions and 2 deletions
@@ -36,11 +36,37 @@
} }
} }
.city-autocomplete__dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: white;
border: 1px solid #e0e0e0;
border-top: none;
border-radius: 0 0 4px 4px;
max-height: 300px;
overflow-y: auto;
z-index: 1000;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.city-autocomplete__item { .city-autocomplete__item {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
padding: 8px; padding: 12px;
cursor: pointer;
transition: background-color 0.2s;
border-bottom: 1px solid #f0f0f0;
&:last-child {
border-bottom: none;
}
&:hover {
background-color: #f5f5f5;
}
} }
.city-autocomplete__code { .city-autocomplete__code {
@@ -146,12 +146,13 @@ export const CityAutocomplete: React.FC<CityAutocompleteProps> = ({
autoComplete="off" autoComplete="off"
/> />
{showSuggestions && suggestions.length > 0 && ( {showSuggestions && suggestions.length > 0 && (
<div className="city-autocomplete__dropdown"> <div className="city-autocomplete__dropdown" data-testid="suggestion-list">
{suggestions.map((city) => ( {suggestions.map((city) => (
<div <div
key={city.code} key={city.code}
className="city-autocomplete__item" className="city-autocomplete__item"
onClick={() => handleSuggestionClick(city)} onClick={() => handleSuggestionClick(city)}
data-testid="suggestion-item"
> >
<div className="city-autocomplete__code" data-testid="city-code">{city.code}</div> <div className="city-autocomplete__code" data-testid="city-code">{city.code}</div>
<div className="city-autocomplete__details"> <div className="city-autocomplete__details">