Fix/DEV-224 (#695)

* PS-339 [FIX] Ensure Form buttons line up (#681) * ID-4527 [FIX] Adjust custom button to be in line with form fields (#680) * Adjust custom button to be in line with form fields * ID-4527 [FIX] Adjust custom button to be in line with form fields * PS-53 [FIX] Ensure Rich text field is rendered in Drag and drop accordion of Add fields overlay after switching between settings tabs (#682) * Revert "PS-53 [FIX] Ensure Rich text field is rendered in Drag and drop accor…" (#687) This reverts commit 51a8ad5. * DEV-219 [FIX] Add custom width setting for Address field (#685) * DEV-224 [FIX] Ensure all map fields are functional when placed together in the same form. --------- Co-authored-by: ysolodka <[email protected]>
Fliplet · Nov 5, 2024 · bd51f0c · bd51f0c
1 parent 331bebd
commit bd51f0c
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 6 deletions.
diff --git a/css/form.css b/css/form.css
@@ -1658,12 +1658,12 @@ form hr {
   align-items: baseline;
   gap: 4px;
 }
-.google-autocomplete :first-child {
+.google-autocomplete-map :first-child {
   padding-left: 3px;
   font-size: 14px;
 }
 
-.google-autocomplete :first-child svg {
+.google-autocomplete-map :first-child svg {
   width: 28px;
   height: 18px;
 }

diff --git a/js/build.templates.js b/js/build.templates.js
diff --git a/js/components/map.js b/js/components/map.js
@@ -166,6 +166,7 @@ Fliplet.FormBuilder.field('map', {
         address: '',
         latLong: null
       };
+      this.$emit('_input', this.name, this.value, false, true);
     },
     initMap: function() {
       this.mapField = Fliplet.UI.MapField(this.$refs.mapField, this.$refs.mapAddressLookUp, {
@@ -210,7 +211,10 @@ Fliplet.FormBuilder.field('map', {
           } else if (this.mapField.checkIfAddressChangedByDragging()) {
             this.updateAddressSuggestions();
             this.mapField.checkIfAddressChangedByDragging(false);
-            this.value = this.mapField.getTotalAddress();
+            this.value = {
+              address: value,
+              latLong: `${this.mapField.get().lat}/${this.mapField.get().lng}`
+            };
             this.suggestionSelected = false;
           } else {
             if (suggestions.length === 1 && value.trim() !== '') {
@@ -226,6 +230,8 @@ Fliplet.FormBuilder.field('map', {
             this.addressSuggestions = suggestions;
             this.suggestionSelected = false;
           }
+
+          this.$emit('_input', this.name, this.value, false, true);
         });
     },
     onReset: function() {
@@ -286,7 +292,7 @@ Fliplet.FormBuilder.field('map', {
           this.suggestionSelected = false;
         }
 
-        this.$emit('_input', this.name, val, false, true);
+        this.$emit('_input', this.name, this.value, false, true);
       }
     },
     addressSuggestions: function(newSuggestions) {

diff --git a/templates/components/map.build.hbs b/templates/components/map.build.hbs
@@ -8,7 +8,7 @@
     @keydown="handleKeyDown"
     @input="handleInput"
   />
-  <ul v-if="!readonly" class="google-autocomplete">
+  <ul v-if="!readonly && addressSuggestions.length > 1" class="google-autocomplete google-autocomplete-map">
     <li  v-for="(option, index) in addressSuggestions" :key="index" @click="selectSuggestion(option)" :class="{ 'active': index === activeSuggestionIndex }">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="17" height="17" viewBox="0 0 256 256" xml:space="preserve">
         <defs>