Auto close pulldowns on outside click

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/ParticipantAddressForm.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="relative">
+    <div class="relative" ref="target">
         <button class="button bg-button button--small w-full"
                 type="button"
                 @click.prevent="visible = !visible">
@@ -40,6 +40,14 @@
           return {
             visible: false,
           }
+      },
+      mounted () {
+          let self = this
+          document.addEventListener('click', e => {
+              if (self.$refs.target !== undefined && self.$refs.target.contains(e.target) === false) {
+                  self.visible = false
+              }
+          })
        }
     }
 </script>

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/ParticipantSizesForm.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="relative" v-if="hasSelectedRentals">
+    <div class="relative" v-if="hasSelectedRentals" ref="target">
         <button class="button bg-button button--small" @click.prevent="visible = !visible">
             <span>
                 Größen
@@ -58,6 +58,14 @@
                 }
                 return result
             }
+        },
+        mounted () {
+            let self = this
+            document.addEventListener('click', e => {
+                if (self.$refs.target !== undefined && self.$refs.target.contains(e.target) === false) {
+                    self.visible = false
+                }
+            })
         }
     }
 </script>

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/PickupSelect.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="relative" tabindex="0">
+    <div class="relative" ref="target">
         <button class="button bg-button button--small" @click.prevent="visible = !visible">
             <span>
                 Zustieg
@@ -46,6 +46,14 @@
                 visible: false,
                 pickupId: this.participant.pickupId
             }
+        },
+        mounted () {
+            let self = this
+            document.addEventListener('click', e => {
+                if (self.$refs.target !== undefined && self.$refs.target.contains(e.target) === false) {
+                    self.visible = false
+                }
+            })
         }
     }
 </script>

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/ServiceSelect.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="relative" v-if="hasServices">
+    <div class="relative" v-if="hasServices" ref="target">
         <button class="button bg-button button--small" type="button" @click.prevent="visible = !visible">
             <span>
                 {{ subType.label }}
@@ -82,6 +82,14 @@
             hasServices () {
                 return Object.keys(this.availableServices).length > 0;
             }
+        },
+        mounted () {
+            let self = this
+            document.addEventListener('click', e => {
+                if (self.$refs.target !== undefined && self.$refs.target.contains(e.target) === false) {
+                    self.visible = false
+                }
+            })
         }
     }
 </script>

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/TransportationSelect.vue

@@ -12,7 +12,6 @@
                 {{ service.name }}
             </span>
         </label>
-
     </div>
 </template>