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 {
|
.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">
|
||||||
|
|||||||
Reference in New Issue
Block a user