Merge pull request #6194 from artoscinote/ma_SCI_9279

Fix z-index issues with share modal [SCI-9279]

app/javascript/vue/shareable_links/components/shareable_link_modal.vue

@@ -95,6 +95,10 @@
     name: "shareModalContainer",
     components: { deleteShareableLinkModal },
     props: {
+      open: {
+        type: Boolean,
+        required: true
+      },
       shared: {
         type: Boolean,
         default: false
@@ -123,11 +127,12 @@
     watch: {
       shared() {
         this.sharedEnabled = this.shared;
+      },
+      open() {
+        this.open ? this.showModal() : this.hideModal();
       }
     },
     mounted() {
-
-      $(this.$refs.modal).modal('show');
       $(this.$refs.modal).on('hidden.bs.modal', () => {
         if (!this.confirmingDelete) {
           this.$emit('close');

app/javascript/vue/shareable_links/container.vue

@@ -12,14 +12,15 @@
         {{ shareValue }}
       </span>
     </button>
-
-    <shareModalContainer v-if="visibleShareModal"
-                         :shared="share"
-                         :shareableLinkUrl="shareableLinkUrl"
-                         :characterLimit="255"
-                         @enable="enableShare"
-                         @disable="disableShare"
-                         @close="closeModal"/>
+    <div ref="modal">
+      <shareModalContainer :shared="share"
+                           :open="visibleShareModal"
+                           :shareableLinkUrl="shareableLinkUrl"
+                           :characterLimit="255"
+                           @enable="enableShare"
+                           @disable="disableShare"
+                           @close="closeModal"/>
+    </div>
   </div>
 </template>
 
@@ -59,6 +60,10 @@
         return this.i18n.t(this.share ? 'my_modules.shareable_links.shared' : 'my_modules.shareable_links.share');
       }
     },
+    mounted() {
+      // move modal to body to avoid z-index issues
+      $('body').append($(this.$refs.modal));
+    },
     methods:{
       enableShare() {
         this.share = true;
@@ -72,7 +77,6 @@
       closeModal() {
         this.visibleShareModal = false;
       }
-
     }
   };
 </script>