Update the favorite name input in Add/Edit favorite panel

map/src/infoblock/components/favorite/WptEditPanel.jsx

@@ -55,7 +55,7 @@ export default function WptEditPanel({ setShowInfoBlock }) {
     const [favoriteName, setFavoriteName] = useState(editWpt?.name ?? '');
     const [favoriteAddress, setFavoriteAddress] = useState(editWpt?.address ?? ctx.addFavorite?.address ?? '');
     const [favoriteDescription, setFavoriteDescription] = useState(editWpt?.desc ?? '');
-    const [addAddress, setAddAddress] = useState(isEditMode || isPoi);
+    const [addAddress, setAddAddress] = useState(isEditMode || isPoi || (isAddMode && !isAddTrackWpt));
     const [addDescription, setAddDescription] = useState(isEditMode);
     const [favoriteGroup, setFavoriteGroup] = useState(null);
     const [favoriteIcon, setFavoriteIcon] = useState(
@@ -486,8 +486,8 @@ export default function WptEditPanel({ setShowInfoBlock }) {
                         <FavoriteAddress
                             favoriteAddress={favoriteAddress}
                             setFavoriteAddress={setFavoriteAddress}
-                            setClose={isEditMode ? null : setAddAddress}
                             widthDialog={PANEL_CONTENT_WIDTH}
+                            latLon={isAddMode ? latLon : null}
                         />
                     )}
                     {!addDescription && (

map/src/infoblock/components/favorite/structure/FavoriteAddress.jsx

@@ -1,48 +1,59 @@
-import { IconButton, ListItemText, TextField } from '@mui/material';
-import { Delete } from '@mui/icons-material';
-import React from 'react';
+import { Box, IconButton, InputAdornment, TextField, Tooltip } from '@mui/material';
+import { ReactComponent as CancelIcon } from '../../../../assets/icons/ic_action_cancel.svg';
+import { ReactComponent as LocationIcon } from '../../../../assets/icons/ic_action_location_marker_outlined.svg';
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { getAddressByLatLon } from '../../wpt/WptDetails';
+import styles from '../wptEditPanel.module.css';
+
+export default function FavoriteAddress({ favoriteAddress, setFavoriteAddress, widthDialog, latLon }) {
+    const { t } = useTranslation();
+
+    const [searching, setSearching] = useState(false);
+
+    useEffect(() => {
+        if (!latLon?.lat || !latLon?.lon || favoriteAddress) return;
+        searchAddress();
+    }, [latLon]);
+
+    function searchAddress() {
+        if (!latLon?.lat || !latLon?.lon) return;
+        setSearching(true);
+        getAddressByLatLon(latLon.lat, latLon.lon).then((address) => {
+            setFavoriteAddress(address ?? '');
+            setSearching(false);
+        });
+    }
 
-export default function FavoriteAddress({ favoriteAddress, setFavoriteAddress, setClose, widthDialog }) {
     return (
-        <ListItemText sx={{ maxWidth: `${widthDialog}px` }}>
+        <Box sx={{ maxWidth: `${widthDialog}px` }}>
             <TextField
                 id="se-edit-fav-dialog-address"
-                label="Address"
+                label={t('web:fav_address')}
                 fullWidth
+                variant="filled"
+                disabled={searching}
                 onChange={(e) => setFavoriteAddress(e.target.value)}
-                value={favoriteAddress}
-                autoFocus
-                sx={{
-                    maxWidth: '450px !important',
-                    resize: 'none',
-                    fontFamily: 'Arial',
-                    color: 'black',
-                    fontSize: 20,
-                    ml: '-2px',
-                    borderColor: '#bebdb4',
-                    backgroundColor: 'transparent',
-                    outlineColor: '#757575',
-                    cursor: 'pointer',
-                    '&[disabled]': { border: 'none' },
-                    mb: '-10px',
-                    pb: '8px',
-                    pt: '8px',
+                value={searching ? t('web:fav_address_searching') : favoriteAddress}
+                inputProps={{ className: styles.fieldInput }}
+                InputProps={{
+                    endAdornment: (
+                        <InputAdornment position="end">
+                            {favoriteAddress ? (
+                                <IconButton size="small" onClick={() => setFavoriteAddress('')}>
+                                    <CancelIcon style={{ fill: 'var(--svg-icon-color)' }} />
+                                </IconButton>
+                            ) : (
+                                <Tooltip title={t('web:fav_address_autofill')}>
+                                    <IconButton size="small" onClick={searchAddress} disabled={searching}>
+                                        <LocationIcon style={{ fill: '#237BFF' }} />
+                                    </IconButton>
+                                </Tooltip>
+                            )}
+                        </InputAdornment>
+                    ),
                 }}
             />
-            {favoriteAddress && favoriteAddress !== '' && (
-                <IconButton
-                    variant="contained"
-                    type="button"
-                    onClick={() => {
-                        if (setClose) {
-                            setClose(false);
-                        }
-                        setFavoriteAddress('');
-                    }}
-                >
-                    <Delete fontSize="small" />
-                </IconButton>
-            )}
-        </ListItemText>
+        </Box>
     );
 }

map/src/infoblock/components/favorite/structure/FavoriteName.jsx

@@ -1,8 +1,9 @@
-import { ListItemText, TextField } from '@mui/material';
+import { Box, TextField } from '@mui/material';
 import React, { useContext, useEffect, useState } from 'react';
 import AppContext from '../../../../context/AppContext';
 import { getPropsFromSearchResultItem } from '../../../../menu/search/search/SearchResultItem';
 import { useTranslation } from 'react-i18next';
+import styles from '../wptEditPanel.module.css';
 
 export default function FavoriteName({
     favoriteName,
@@ -27,16 +28,15 @@ export default function FavoriteName({
         }
         let group = ctx.favorites?.mapObjs?.[id];
         let names = [];
-        group &&
-            group.wpts.forEach((wpt) => {
-                if (favorite) {
-                    if (wpt.name !== favorite.name) {
-                        names.push(wpt.name);
-                    }
-                } else {
+        group?.wpts.forEach((wpt) => {
+            if (favorite) {
+                if (wpt.name !== favorite.name) {
                     names.push(wpt.name);
                 }
-            });
+            } else {
+                names.push(wpt.name);
+            }
+        });
         validateName(favoriteName, names);
         setFavNames(names);
     }, [favoriteGroup]);
@@ -60,14 +60,14 @@ export default function FavoriteName({
         setErrorName(nameExists);
     }
 
-    function gerErrorText(favoriteName) {
-        if (favoriteName === '') {
-            return 'Empty name!';
+    function getErrorText(name) {
+        if (name === '') {
+            return t('web:fav_name_empty');
         } else if (nameAlreadyExist) {
-            return 'This name already exists!';
-        } else {
-            return ' ';
+            return t('web:fav_name_already_exists');
         }
+
+        return ' ';
     }
 
     useEffect(() => {
@@ -86,33 +86,19 @@ export default function FavoriteName({
     }, [ctx.selectedWpt]);
 
     return (
-        <ListItemText sx={{ maxWidth: `${widthDialog}px` }}>
+        <Box sx={{ maxWidth: `${widthDialog}px` }}>
             <TextField
                 id={isGroupName ? 'se-fav-group-name-input' : 'se-fav-name-input'}
-                label="Name"
+                label={t('shared_string_name')}
                 fullWidth
+                variant="filled"
                 onChange={(e) => setFavoriteName(e.target.value)}
                 value={favoriteName}
                 autoFocus
                 error={favoriteName === '' || nameAlreadyExist}
-                helperText={gerErrorText(favoriteName)}
-                sx={{
-                    maxWidth: '450px !important',
-                    resize: 'none',
-                    fontFamily: 'Arial',
-                    color: 'black',
-                    fontSize: 20,
-                    ml: '-2px',
-                    borderColor: '#bebdb4',
-                    backgroundColor: 'transparent',
-                    outlineColor: '#757575',
-                    cursor: 'pointer',
-                    '&[disabled]': { border: 'none' },
-                    mb: '-10px',
-                    pb: '8px',
-                    pt: '8px',
-                }}
+                helperText={getErrorText(favoriteName)}
+                FormHelperTextProps={{ className: styles.helperText }}
             />
-        </ListItemText>
+        </Box>
     );
 }

map/src/infoblock/components/favorite/wptEditPanel.module.css

@@ -13,7 +13,20 @@
 }
 
 .fields {
-    padding: 8px 16px 16px 16px;
+    padding: 16px;
+}
+
+.helperText {
+    height: 16px;
+    line-height: 16px;
+    margin: 2px 0 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.fieldInput {
+    padding-left: 8px !important;
 }
 
 .actions {

map/src/infoblock/components/wpt/WptDetails.jsx

@@ -161,6 +161,22 @@ export const ADDRESS_NOT_FOUND = i18n.t('web:no_data');
 export const TYPE_NOT_FOUND = 'No type';
 export const EMPTY_STRING = '';
 
+export async function getAddressByLatLon(lat, lon) {
+    if (lat == null || lon == null) return null;
+    const response = await apiGet(`${process.env.REACT_APP_ROUTING_API_SITE}/search/get-poi-address`, {
+        apiCache: true,
+        params: { lat, lon },
+    });
+    if (response?.data) {
+        return response.data
+            .replace(/ str\./g, '')
+            .replace(/ city/g, ',')
+            .replace(/ dist.*/g, '');
+    }
+
+    return null;
+}
+
 export default function WptDetails({ setOpenWptTab, setShowInfoBlock }) {
     const ctx = useContext(AppContext);
     const { t } = useTranslation();
@@ -639,25 +655,8 @@ export default function WptDetails({ setOpenWptTab, setShowInfoBlock }) {
         return fmt.dateTimeShort(time);
     }
 
-    async function getPoiAddress(wpt) {
-        if (wpt.latlon?.lat == null || wpt.latlon?.lon == null) {
-            return null;
-        }
-        const response = await apiGet(`${process.env.REACT_APP_ROUTING_API_SITE}/search/get-poi-address`, {
-            apiCache: true,
-            params: {
-                lat: wpt.latlon.lat,
-                lon: wpt.latlon.lon,
-            },
-        });
-        if (response?.data) {
-            return response.data
-                .replace(/ str\./g, '')
-                .replace(/ city/g, ',')
-                .replace(/ dist.*/g, '');
-        } else {
-            return null;
-        }
+    function getPoiAddress(wpt) {
+        return getAddressByLatLon(wpt.latlon?.lat, wpt.latlon?.lon);
     }
 
     async function getPhotos(wpt) {

map/src/resources/translations/en/web-translation.json

@@ -315,6 +315,11 @@
     "rename_track_not_found": "Track not found.",
     "rename_empty_folder_name": "Empty folder name.",
     "rename_folder_already_exists": "Folder already exists.",
+    "fav_name_empty": "Empty name.",
+    "fav_name_already_exists": "This name already exists.",
+    "fav_address": "Address",
+    "fav_address_searching": "Searching...",
+    "fav_address_autofill": "Auto-fill address",
     "rename_item_not_found": "Folder or track was not found.",
     "garmin_sync_title": "Sync your activities",
     "garmin_sync_description": "Connect your account to sync Garmin Connect™ activities with OsmAnd.",