From 1e3147929c7698a52449cb38d64066efaa755dff Mon Sep 17 00:00:00 2001
From: gnezim <gnezim@gnerim.ru>
Date: Mon, 6 Apr 2026 08:40:22 +0300
Subject: [PATCH] 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
---
 .../city-autocomplete/city-autocomplete.scss  | 28 ++++++++++++++++++-
 .../city-autocomplete/city-autocomplete.tsx   |  3 +-
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/apps/react/src/app/components/city-autocomplete/city-autocomplete.scss b/apps/react/src/app/components/city-autocomplete/city-autocomplete.scss
index 8b1bb23af..2940c59cb 100644
--- a/apps/react/src/app/components/city-autocomplete/city-autocomplete.scss
+++ b/apps/react/src/app/components/city-autocomplete/city-autocomplete.scss
@@ -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 {
diff --git a/apps/react/src/app/components/city-autocomplete/city-autocomplete.tsx b/apps/react/src/app/components/city-autocomplete/city-autocomplete.tsx
index 9801794f3..d677da566 100644
--- a/apps/react/src/app/components/city-autocomplete/city-autocomplete.tsx
+++ b/apps/react/src/app/components/city-autocomplete/city-autocomplete.tsx
@@ -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">