From 9b69b640c329436c7d1bbca4ccd50f45f59f5f67 Mon Sep 17 00:00:00 2001
From: thefifthisa <ijlavandero@gmail.com>
Date: Sun, 22 Jul 2018 19:47:57 -0400
Subject: [PATCH 1/3] close on click out works for background but not inside
 modal

---
 website/client/components/tasks/taskModal.vue | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/website/client/components/tasks/taskModal.vue b/website/client/components/tasks/taskModal.vue
index aa09db6fa0..81a73d6ee5 100644
--- a/website/client/components/tasks/taskModal.vue
+++ b/website/client/components/tasks/taskModal.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
   form(v-if="task", @submit.stop.prevent="submit()")
-    b-modal#task-modal(size="sm", @hidden="onClose()", @show="handleOpen()", @shown="focusInput()")
+    b-modal#task-modal(v-bind:no-close-on-backdrop="showTagsSelect", size="sm", @hidden="onClose()", @show="handleOpen()", @shown="focusInput()")
       .task-modal-header(slot="modal-header", :class="cssClass('bg')")
         .clearfix
           h1.float-left {{ title }}
@@ -803,6 +803,12 @@ export default {
       return this.selectedTags.slice(this.maxTags);
     },
   },
+  created () {
+    document.addEventListener('click', this.handleClick);
+  },
+  destroyed () {
+    document.removeEventListener('click', this.handleClick);
+  },
   methods: {
     ...mapActions({saveTask: 'tasks:save', destroyTask: 'tasks:destroy', createTask: 'tasks:create'}),
     async syncTask () {
@@ -988,6 +994,11 @@ export default {
     focusInput () {
       this.$refs.inputToFocus.focus();
     },
+    handleClick () {
+      if (this.showTagsSelect) {
+        this.closeTagsPopup();
+      }
+    },
   },
 };
 </script>

From a31f1f19fced68ebb5a80dde727a3025456e0bf4 Mon Sep 17 00:00:00 2001
From: thefifthisa <ijlavandero@gmail.com>
Date: Mon, 23 Jul 2018 20:45:50 -0400
Subject: [PATCH 2/3] works inside modal too (mostly)

---
 website/client/components/tasks/taskModal.vue | 20 +++++++------------
 1 file changed, 7 insertions(+), 13 deletions(-)

diff --git a/website/client/components/tasks/taskModal.vue b/website/client/components/tasks/taskModal.vue
index 81a73d6ee5..25b38cb7e0 100644
--- a/website/client/components/tasks/taskModal.vue
+++ b/website/client/components/tasks/taskModal.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
-  form(v-if="task", @submit.stop.prevent="submit()")
+  form(v-if="task", @submit.stop.prevent="submit()", @click="handleClick($event)")
     b-modal#task-modal(v-bind:no-close-on-backdrop="showTagsSelect", size="sm", @hidden="onClose()", @show="handleOpen()", @shown="focusInput()")
-      .task-modal-header(slot="modal-header", :class="cssClass('bg')")
+      .task-modal-header(slot="modal-header", :class="cssClass('bg')", @click="handleClick($event)")
         .clearfix
           h1.float-left {{ title }}
           .float-right.d-flex.align-items-center
@@ -23,7 +23,7 @@
               a(target="_blank", href="http://habitica.wikia.com/wiki/Markdown_Cheat_Sheet") {{ $t('markdownHelpLink') }}
 
           textarea.form-control(v-model="task.notes", rows="3")
-      .task-modal-content
+      .task-modal-content(@click="handleClick($event)")
         .option.mt-0(v-if="task.type === 'reward'")
           .form-group
             label(v-once) {{ $t('cost') }}
@@ -135,7 +135,7 @@
                 input.custom-control-input(type='radio', v-model="repeatsOn", value="dayOfWeek", id="repeat-dayOfWeek" name="repeatsOn")
                 label.custom-control-label(for="repeat-dayOfWeek") {{ $t('dayOfWeek') }}
 
-        .tags-select.option(v-if="isUserTask")
+        .tags-select.option(v-if="isUserTask", ref="tagsBox")
           .tags-inline.form-group.row
             label.col-12(v-once) {{ $t('tags') }}
             .col-12
@@ -242,7 +242,7 @@
           .svg-icon.d-inline-b(v-html="icons.destroy")
           span {{ $t('deleteTask') }}
 
-      .task-modal-footer.d-flex.justify-content-center.align-items-center(slot="modal-footer")
+      .task-modal-footer.d-flex.justify-content-center.align-items-center(slot="modal-footer", @click="handleClick($event)")
         .cancel-task-btn(v-once, @click="cancel()") {{ $t('cancel') }}
         button.btn.btn-primary(type="submit", v-once) {{ $t('save') }}
 </template>
@@ -803,12 +803,6 @@ export default {
       return this.selectedTags.slice(this.maxTags);
     },
   },
-  created () {
-    document.addEventListener('click', this.handleClick);
-  },
-  destroyed () {
-    document.removeEventListener('click', this.handleClick);
-  },
   methods: {
     ...mapActions({saveTask: 'tasks:save', destroyTask: 'tasks:destroy', createTask: 'tasks:create'}),
     async syncTask () {
@@ -994,8 +988,8 @@ export default {
     focusInput () {
       this.$refs.inputToFocus.focus();
     },
-    handleClick () {
-      if (this.showTagsSelect) {
+    handleClick (e) {
+      if (this.showTagsSelect && !this.$refs.tagsBox.contains(e.target)) {
         this.closeTagsPopup();
       }
     },

From f30d4b2cbf08ed47afea71dede3ba0a3e343e174 Mon Sep 17 00:00:00 2001
From: thefifthisa <ijlavandero@gmail.com>
Date: Tue, 24 Jul 2018 19:07:59 -0400
Subject: [PATCH 3/3] works for all outside clicks!

---
 website/client/components/tasks/taskModal.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/website/client/components/tasks/taskModal.vue b/website/client/components/tasks/taskModal.vue
index 25b38cb7e0..b6b35ecbe1 100644
--- a/website/client/components/tasks/taskModal.vue
+++ b/website/client/components/tasks/taskModal.vue
@@ -135,7 +135,7 @@
                 input.custom-control-input(type='radio', v-model="repeatsOn", value="dayOfWeek", id="repeat-dayOfWeek" name="repeatsOn")
                 label.custom-control-label(for="repeat-dayOfWeek") {{ $t('dayOfWeek') }}
 
-        .tags-select.option(v-if="isUserTask", ref="tagsBox")
+        .tags-select.option(v-if="isUserTask")
           .tags-inline.form-group.row
             label.col-12(v-once) {{ $t('tags') }}
             .col-12
@@ -147,7 +147,7 @@
                   .category-label(v-for='tagName in truncatedSelectedTags', :title="tagName", v-markdown='tagName')
                   .tags-more(v-if='remainingSelectedTags.length > 0') +{{ $t('more', { count: remainingSelectedTags.length }) }}
                   .dropdown-toggle
-          tags-popup(v-if="showTagsSelect", :tags="user.tags", v-model="task.tags", @close='closeTagsPopup()')
+          tags-popup(ref="popup", v-if="showTagsSelect", :tags="user.tags", v-model="task.tags", @close='closeTagsPopup()')
 
         .option(v-if="task.type === 'habit'")
           .form-group
@@ -989,7 +989,7 @@ export default {
       this.$refs.inputToFocus.focus();
     },
     handleClick (e) {
-      if (this.showTagsSelect && !this.$refs.tagsBox.contains(e.target)) {
+      if (this.$refs.popup && !this.$refs.popup.$el.contains(e.target)) {
         this.closeTagsPopup();
       }
     },