Fix text overflow and submit on enter (#40)

<!--

Thank you for submitting a pull request!

Here's a checklist you might find useful.
[ ] There is an associated issue that is labelled
  'Bug' or 'help wanted' or is in the Community milestone
[ ] Code is up-to-date with the `main` branch
[ ] You've successfully run `npm test` locally
[ ] There are new or updated tests validating the change

-->

Fixes #

src/common/utils.ts

@@ -1,7 +1,14 @@
+import type {LngLat} from '@mappable-world/mappable-types';
+
 export function createMMapElement(className?: string): HTMLElement {
     const el = document.createElement('mappable');
     if (className) {
         el.className = className;
     }
     return el;
 }
+
+export function areFuzzyEqual(a: LngLat, b: LngLat, tolerance = 1e-6): boolean {
+    const d = [a[0] - b[0], a[1] - b[1]];
+    return -tolerance < d[0] && d[0] < tolerance && -tolerance < d[1] && d[1] < tolerance;
+}

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

@@ -24,6 +24,7 @@ import {
 } from './helpers';
 import './index.css';
 import {formatDistance, formatDuration} from './utils';
+import {areFuzzyEqual} from '../../common/utils';
 
 export type WaypointsArray = Array<SelectWaypointArgs['feature'] | null>;
 
@@ -204,8 +205,12 @@ class MMapCommonRouteControl extends mappable.MMapComplexEntity<MMapRouteControl
             this._waypointInputToElement.update({suggest: diffProps.suggest});
         }
         if (diffProps.waypoints !== undefined) {
-            this._waypointInputFromElement.update({waypoint: diffProps.waypoints[0]});
-            this._waypointInputToElement.update({waypoint: diffProps.waypoints[1]});
+            if (!areFuzzyEqual(this._waypoints[0].geometry.coordinates, diffProps.waypoints[0])) {
+                this._waypointInputFromElement.update({waypoint: diffProps.waypoints[0], value: undefined});
+            }
+            if (!areFuzzyEqual(this._waypoints[1].geometry.coordinates, diffProps.waypoints[1])) {
+                this._waypointInputToElement.update({waypoint: diffProps.waypoints[1], value: undefined});
+            }
         }
         if (diffProps.geolocationTextInput !== undefined) {
             this._waypointInputFromElement.update({geolocationTextInput: diffProps.geolocationTextInput});
@@ -278,8 +283,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);
     };