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:
@@ -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 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
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 {
|
||||
|
||||
@@ -146,12 +146,13 @@ export const CityAutocomplete: React.FC<CityAutocompleteProps> = ({
|
||||
autoComplete="off"
|
||||
/>
|
||||
{showSuggestions && suggestions.length > 0 && (
|
||||
<div className="city-autocomplete__dropdown">
|
||||
<div className="city-autocomplete__dropdown" data-testid="suggestion-list">
|
||||
{suggestions.map((city) => (
|
||||
<div
|
||||
key={city.code}
|
||||
className="city-autocomplete__item"
|
||||
onClick={() => handleSuggestionClick(city)}
|
||||
data-testid="suggestion-item"
|
||||
>
|
||||
<div className="city-autocomplete__code" data-testid="city-code">{city.code}</div>
|
||||
<div className="city-autocomplete__details">
|
||||
|
||||
Reference in New Issue
Block a user