Fix autocomplete activity event

public/build/manifest.json

@@ -10,7 +10,7 @@
     "isEntry": true
   },
   "resources/js/app.js": {
-    "file": "assets/app-BxPfZKER.js",
+    "file": "assets/app-DyUnC4b0.js",
     "name": "app",
     "src": "resources/js/app.js",
     "isEntry": true,
@@ -93,7 +93,7 @@
     "isDynamicEntry": true
   },
   "resources/lang/php_en.json": {
-    "file": "assets/php_en-B2R4wRxg.js",
+    "file": "assets/php_en-Dw8ZqFZ3.js",
     "name": "php_en",
     "src": "resources/lang/php_en.json",
     "isDynamicEntry": true

resources/js/components/activity-form/FormStep1.vue

@@ -21,11 +21,29 @@
       </template>
     </FieldWrapper>
 
-    <FieldWrapper horizontalBreakpoint="md" :label="`${$t('event.address.label')} ${['open-online', 'invite-online'].includes(formValues.activity_type)
-        ? '(optional)'
-        : '*'
-      }`" name="location" :errors="errors">
-      <autocomplete-geo class="custom-geo-input" name="location" :placeholder="$t('event.address.placeholder')" :location="formValues.location" :value="formValues.location" :geoposition="formValues.geoposition" @onChange="handleLocationChange"></autocomplete-geo>
+    <FieldWrapper
+      horizontalBreakpoint="md"
+      :label="`${$t('event.address.label')} ${['open-online','invite-online'].includes(formValues.activity_type) ? '(optional)' : '*'}`"
+      name="location"
+      :errors="errors"
+    >
+      <autocomplete-geo
+        class="custom-geo-input"
+        name="location"
+        :placeholder="$t('event.address.placeholder')"
+        :location="formValues.location"
+        :value="formValues.location"
+        :geoposition="formValues.geoposition"
+        @onChange="handleLocationChange"
+        @input="handleLocationTyping"
+        @clear="handleLocationClear"
+      ></autocomplete-geo>
+
+      <template #end>
+        <div v-if="showSelectHint" class="text-sm text-slate-500 mt-2">
+          {{ $t('event.please-select-address-from-dropdown') }}
+        </div>
+      </template>
     </FieldWrapper>
 
     <FieldWrapper horizontalBreakpoint="md" :label="$t('event.activity-duration')" name="duration" :errors="errors">
@@ -79,7 +97,7 @@
 </template>
 
 <script>
-import { onMounted } from 'vue';
+import { computed } from 'vue';
 
 import { useDataOptions } from './mixins.js';
 
@@ -104,30 +122,51 @@ export default {
     RadioField,
     TinymceField,
   },
-  setup(props, { emit }) {
+  setup(props) {
     const {
       activityFormatOptions,
       activityTypeOptions,
       durationOptions,
       recurringTypeOptions,
     } = useDataOptions();
 
+    const showSelectHint = computed(() => {
+      const isOnline = ['open-online','invite-online'].includes(props.formValues.activity_type);
+      return !isOnline && props.formValues.locationDirty === true && props.formValues.locationSelected === false;
+    });
+
+    const handleLocationTyping = (text) => {
+      props.formValues.location = text ?? '';
+      props.formValues.locationDirty = true;
+      props.formValues.locationSelected = false;
+    };
+
+    const handleLocationClear = () => {
+      props.formValues.location = '';
+      props.formValues.locationDirty = true;
+      props.formValues.locationSelected = false;
+    };
+
     const handleLocationChange = ({ location, geoposition, country_iso }) => {
-      props.formValues.location = location;
+      props.formValues.location = location || '';
       props.formValues.geoposition = geoposition;
-      const foundCountry = props.countries.find(
-        ({ iso }) => iso === country_iso
-      );
-      props.formValues.country_iso = foundCountry;
+      props.formValues.country_iso = country_iso;
+      props.formValues.locationSelected = true;
+      props.formValues.locationDirty = true;
     };
 
     return {
       activityFormatOptions,
       activityTypeOptions,
       durationOptions,
       recurringTypeOptions,
+
+      // UX hint
+      showSelectHint,
+      handleLocationTyping,
+      handleLocationClear,
       handleLocationChange,
     };
   },
 };
-</script>
+</script>

resources/lang/en/event.php

@@ -380,4 +380,5 @@
     'add-another-activity' => 'Add another Activity',
     'back-to-map-page' => 'Back to map page',
     'image-attached' => 'Image Attached',
+    'please-select-address-from-dropdown' => 'Please select an address from the dropdown',
 ];