Fix text overflow and submit on enter

src/controls/MMapRouteControl/MMapWaypointInput/index.css

@@ -36,7 +36,8 @@
     .mappable--route-control_waypoint-input__field {
         box-sizing: border-box;
         height: 40px;
-        padding: 12px;
+        padding: 12px 30px 12px 12px;
+        text-overflow: ellipsis;
         border: none;
         border-radius: 8px;
         background: rgba(92, 94, 102, 0.06);

src/controls/MMapRouteControl/MMapWaypointInput/index.ts

@@ -32,6 +32,7 @@ export type SelectWaypointArgs = {
 export type MMapWaypointInputProps = {
     type: 'from' | 'to';
     inputPlaceholder: string;
+    value?: string;
     waypoint?: LngLat | null;
     geolocationTextInput?: string;
     search?: ({params, map}: CustomSearch) => Promise<SearchResponse> | SearchResponse;
@@ -68,6 +69,10 @@ export class MMapWaypointInput extends mappable.MMapComplexEntity<MMapWaypointIn
         this._inputEl.focus();
     }
 
+    public getValue(): string {
+        return this._inputEl.value;
+    }
+
     constructor(props: MMapWaypointInputProps) {
         super(props, {container: true});
 
@@ -76,8 +81,7 @@ export class MMapWaypointInput extends mappable.MMapComplexEntity<MMapWaypointIn
             setSearchInputValue: (text) => {
                 this._inputEl.value = text;
             },
-            onSuggestClick: (params: SearchParams) => {
-                this._inputEl.value = params.text;
+            onSuggestClick: () => {
                 this._submitWaypointInput();
             }
         });
@@ -167,7 +171,7 @@ export class MMapWaypointInput extends mappable.MMapComplexEntity<MMapWaypointIn
                 this._props.waypoint = undefined;
                 this._resetInput();
             } else {
-                this._search({text: this._props.waypoint.toString()}, this._props.waypoint);
+                this._search({text: this._props.waypoint.toString()}, this._props.waypoint, this._props.value);
             }
         }
 
@@ -212,6 +216,7 @@ export class MMapWaypointInput extends mappable.MMapComplexEntity<MMapWaypointIn
 
     private _onFocusInput = (_event: FocusEvent) => {
         this._isInputFocused = true;
+        this._suggestComponent.update({suggestNavigationAction: undefined});
         this._addDirectChild(this._suggestComponent);
         this._updateIndicatorStatus('focus');
     };
@@ -239,6 +244,7 @@ export class MMapWaypointInput extends mappable.MMapComplexEntity<MMapWaypointIn
             return;
         }
         const {uri, text} = this._suggestComponent.activeSuggest.dataset;
+        this._inputEl.value = text;
         this._search({uri, text});
         this._removeDirectChild(this._suggestComponent);
         this._inputEl.blur();
@@ -270,7 +276,7 @@ export class MMapWaypointInput extends mappable.MMapComplexEntity<MMapWaypointIn
         this._props.onSelectWaypoint({feature});
     };
 
-    private async _search(params: SearchParams, reverseGeocodingCoordinate?: LngLat) {
+    private async _search(params: SearchParams, reverseGeocodingCoordinate?: LngLat, valueOverride?: string) {
         try {
             const searchResult =
                 (await this._props.search?.({params, map: this.root})) ?? (await mappable.search(params));
@@ -281,7 +287,7 @@ export class MMapWaypointInput extends mappable.MMapComplexEntity<MMapWaypointIn
 
             const feature = searchResult[0];
             if (reverseGeocodingCoordinate) {
-                this._inputEl.value = feature.properties.name;
+                this._inputEl.value = valueOverride ? valueOverride : feature.properties.name;
                 feature.geometry.coordinates = reverseGeocodingCoordinate;
             }
             this._updateIndicatorStatus('setted');

src/controls/MMapRouteControl/index.ts

@@ -278,8 +278,16 @@ class MMapCommonRouteControl extends mappable.MMapComplexEntity<MMapRouteControl
 
     private _changeOrder = () => {
         const [fromOld, toOld] = this._waypoints;
-        this._waypointInputToElement.update({waypoint: fromOld === null ? null : fromOld.geometry.coordinates});
-        this._waypointInputFromElement.update({waypoint: toOld === null ? null : toOld.geometry.coordinates});
+        const fromValue = this._waypointInputFromElement.getValue();
+        const toValue = this._waypointInputToElement.getValue();
+        this._waypointInputToElement.update({
+            waypoint: fromOld === null ? null : fromOld.geometry.coordinates,
+            value: !fromValue ? null : fromValue
+        });
+        this._waypointInputFromElement.update({
+            waypoint: toOld === null ? null : toOld.geometry.coordinates,
+            value: !toValue ? null : toValue
+        });
     };
 
     private _onUpdateWaypoints(feature: Feature | null, index: number) {

src/controls/MMapSearchControl/MMapSuggest/index.ts

@@ -54,6 +54,7 @@ class MMapSuggest extends mappable.MMapComplexEntity<MMapSuggestProps> {
 
         this._addSuggestItems(suggestResult, this._props.onSuggestClick);
 
+        this._getSuggestElements().at(0)?.classList.add(ACTIVE_CLASS);
         this._rootElement?.classList.toggle(HIDE_CLASS, !this.children.length);
     };