Geopicker field saves correct values

src/collections/Makers.ts

@@ -1,4 +1,5 @@
 import { CollectionConfig } from 'payload/types';
+import { geoPickerField } from "../customFields/geoPicker/field";
 
 const Makers: CollectionConfig = {
   slug: 'makers',
@@ -14,11 +15,7 @@ const Makers: CollectionConfig = {
         type: 'text', // required
         required: true,
       },
-      {
+      geoPickerField,
-        name: 'location',
-        type: 'point',
-        label: 'Location',
-      },
       {
         name: 'products', // required
         type: 'relationship', // required

src/customFields/GeoPicker/field.ts

@@ -1,12 +0,0 @@
-import { Field } from 'payload/types';
-import { GeoPicker} from './GeoPicker';
-
-export const GeoPickerField: Field = {
-  name: 'GeoPicker',
-  type: 'point',
-  admin: {
-    components: {
-      Field: GeoPicker,
-    },
-  }
-}

src/customFields/geoPicker/GeoPicker.tsx

@@ -1,21 +1,26 @@
 import * as React from 'react';
-import { useField } from 'payload/components/forms';
+import { useField, Label, TextInput } from 'payload/components/forms';
 
 export const GeoPicker: React.FC<{ path: string }> = ({ path }) => {
   const { value, setValue } = useField<string>({ path });
-  const [latitude, setLatitude] = React.useState(null);
+  const [latitude, setLatitude] = React.useState("");
-  const [longitude, setLongitude] = React.useState(null);
+  const [longitude, setLongitude] = React.useState("");
 
-  const handleKeyPress = async (e) => {
+  const handleCityEnter = async (e) => {
+    console.log("Handle key")
     if (e.key === 'Enter') {
+      console.log("Enter: " + e.target.value)
       try {
         const response = await fetch(
-          `https://nominatim.openstreetmap.org/search?format=json&q=${value}`
+          `https://nominatim.openstreetmap.org/search?format=json&q=${e.target.value}`
         );
         const data = await response.json();
         if (data && data.length > 0) {
-          setLatitude(parseFloat(data[0].lat));
+          const { lat, lon } = data[0];
-          setLongitude(parseFloat(data[0].lon));
+          setLatitude(lat);
+          setLongitude(lon);
+          setValue([lon, lat]);
+          console.log(data)
         }
       } catch (error) {
         console.error('Error fetching geolocation:', error);
@@ -23,6 +28,14 @@ export const GeoPicker: React.FC<{ path: string }> = ({ path }) => {
     }
   };
 
+  const handleLatitudeChange = (e) => {
+    setLatitude(e.target.value);
+  };
+
+  const handleLongitudeChange = (e) => {
+    setLongitude(e.target.value);
+  };
+
   return (
     <div>
       <div className='field-type text'>
@@ -32,9 +45,7 @@ export const GeoPicker: React.FC<{ path: string }> = ({ path }) => {
         <input
           type="text"
           className='field-name'
-          value={value}
+          onKeyDown={handleCityEnter}
-          onChange={(e) => setValue(e.target.value)}
-          onKeyDown={handleKeyPress}
           placeholder="Enter city to get coordinates"
         />
       </div>
@@ -42,11 +53,11 @@ export const GeoPicker: React.FC<{ path: string }> = ({ path }) => {
         <ul className='point__wrap'>
           <li>
             <label className='field-label'>Location - Longitude</label>
-            <input id="field-longitude-location" type="number" name="location.longitude" value={longitude}></input>
+            <input id="field-longitude-location" type="number" name="location.longitude" value={longitude} onChange={handleLongitudeChange}></input>
           </li>
           <li>
             <label className='field-label'>Location - Latitude</label>
-            <input id="field-latitude-latitude" type="number" name="location.latitude" value={latitude}></input>
+            <input id="field-latitude-latitude" type="number" name="location.latitude" value={latitude} onChange={handleLatitudeChange}></input>
           </li>
         </ul>
       </div>

src/customFields/geoPicker/field.ts

@@ -0,0 +1,12 @@
+import { PointField } from 'payload/types';
+import { GeoPicker } from './GeoPicker';
+
+export const geoPickerField: PointField = {
+  name: 'Location',
+  type: 'point',
+  admin: {
+    components: {
+      Field: GeoPicker,
+    },
+  },
+}