fix modal in textarea

src/components/MagicoModal.vue

@@ -1,30 +1,10 @@
 <template>
-  <div
-    :id="id"
-    class="modal"
-  >
-    <div
-      class="modal-dialog"
-      :class="class_other"
-    >
-      <div
-        v-if="modal"
-        class="modal-content"
-      >
-        <div
-          v-if="title"
-          class="modal-header"
-        >
-          <h4
-            class="modal-title"
-            v-html="title"
-          />
-          <button
-            type="button"
-            class="btn-close"
-            data-bs-dismiss="modal"
-            aria-label="Close"
-          />
+  <div :id="id" class="modal">
+    <div class="modal-dialog" :class="class_other">
+      <div v-if="modal" class="modal-content">
+        <div v-if="title" class="modal-header">
+          <h4 class="modal-title" v-html="title" />
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" />
         </div>
         <div class="p-3">
           <slot />
@@ -35,50 +15,53 @@
 </template>
 
 <script>
-import { Modal } from "bootstrap";
-import { onMounted, onBeforeUnmount, ref, watch } from "vue";
+import { Modal } from 'bootstrap'
+import { onMounted, onBeforeUnmount, ref, watch } from 'vue'
 
 export default {
-  props: ["modelValue", "title", "class_other"],
+  props: ['modelValue', 'title', 'class_other'],
   setup(props, { emit }) {
-    const id = "modal" + Math.round(Math.random() * 100000);
-    const modal = ref(null);
+    const id = 'modal' + Math.round(Math.random() * 100000)
+    const modal = ref(null)
 
     const triggerModal = (value, emitEvent = true) => {
       if (value == true) {
-        modal.value.show();
+        modal.value.show()
       } else {
-        modal.value.hide();
+        modal.value.hide()
         if (emitEvent) {
-          emit("hide");
+          emit('hide')
         }
       }
-      emit("update:modelValue", value);
-    };
+      emit('update:modelValue', value)
+    }
 
     onMounted(() => {
-      document.body.append(document.getElementById(id));
-      modal.value = new Modal(document.getElementById(id));
-      document.getElementById(id).addEventListener("hidden.bs.modal", function () {
-        triggerModal(false);
-      });
-      triggerModal(props.modelValue, false);
-    });
+      document.body.append(document.getElementById(id))
+      modal.value = new Modal(document.getElementById(id))
+      document.getElementById(id).addEventListener('hidden.bs.modal', function () {
+        triggerModal(false)
+      })
+      triggerModal(props.modelValue, false)
+    })
 
     onBeforeUnmount(() => {
-      document.getElementById(id).remove();
-    });
+      modal.value.hide()
+      setTimeout(function () {
+        document.getElementById(id).remove()
+      }, 500)
+    })
 
     watch(
       () => props.modelValue,
       () => {
-        triggerModal(props.modelValue);
+        triggerModal(props.modelValue)
       }
-    );
+    )
 
-    return { id, modal };
-  },
-};
+    return { id, modal }
+  }
+}
 </script>
 
 <style>

src/components/plugin/SectionTextarea.vue

@@ -1,29 +1,45 @@
 <template>
-    <div class="row m-0 p-0 align-items-center">
-        <div class="col-sm-12 col-md-6 p-0">
-            <span class="material-icons-outlined box-move me-2" style="cursor:move;">open_with</span><span
-                class="font-weight-bold text-primary">{{ langs.label }}</span>
-        </div>
-
-        <div class="col-sm-12 col-md-6 p-0 text-end">
-            <a href="#" @click.prevent="modalBox = !modalBox" title="Edytuj" class="text-primary me-2"><i
-                    class="material-icons-outlined">create</i></a>
-            <b-modal no-enforce-focus class_other="modal-xl" v-model="modalBox" :title="langs.label"
-                v-on:hide="onCloseModal">
-                <div class="mb-4">
-                    <div class="form-group">
-                        <editor api-key="no-api-key" rows="12" class="form-control" v-model="text" :init="vtinymce" />
-                    </div>
-                </div>
-                <div class="d-flex"><button class="btn btn-outline-secondary m-auto" @click.prevent="onCloseModal">{{
-                        langs.saveclose
-                }}</button></div>
-            </b-modal>
-            <a href="#" title="Usuń" @click.prevent="removeItem()" class="text-danger"><i
-                    class="material-icons-outlined">delete</i></a>
-        </div>
-        <div class="ms-4" style="color: #a9a9a9" v-html="ctext"></div>
+  <div class="row m-0 p-0 align-items-center">
+    <div class="col-sm-12 col-md-6 p-0">
+      <span class="material-icons-outlined box-move me-2" style="cursor: move">open_with</span
+      ><span class="font-weight-bold text-primary">{{ langs.label }}</span>
     </div>
+
+    <div class="col-sm-12 col-md-6 p-0 text-end">
+      <a href="#" @click.prevent="modalBox = !modalBox" title="Edytuj" class="text-primary me-2"
+        ><i class="material-icons-outlined">create</i></a
+      >
+      <b-modal
+        no-enforce-focus
+        class_other="modal-xl"
+        v-model="modalBox"
+        :title="langs.label"
+        v-on:hide="onCloseModal"
+      >
+        <div class="mb-4">
+          <div class="form-group">
+            <editor
+              api-key="no-api-key"
+              rows="12"
+              class="form-control"
+              v-if="modalBox"
+              v-model="text"
+              :init="vtinymce"
+            />
+          </div>
+        </div>
+        <div class="d-flex">
+          <button class="btn btn-outline-secondary m-auto" @click.prevent="onCloseModal">
+            {{ langs.saveclose }}
+          </button>
+        </div>
+      </b-modal>
+      <a href="#" title="Usuń" @click.prevent="removeItem()" class="text-danger"
+        ><i class="material-icons-outlined">delete</i></a
+      >
+    </div>
+    <div class="ms-4" style="color: #a9a9a9" v-html="ctext"></div>
+  </div>
 </template>
 <script>
 import MagicoModal from './../MagicoModal.vue'
@@ -31,77 +47,82 @@ import tinymceConfig from '../tinymce/config.js'
 
 import Editor from '@tinymce/tinymce-vue'
 export default {
-    emits:['update:modelValue'],
-    components: {
-        'b-modal': MagicoModal,
+  emits: ['update:modelValue'],
+  components: {
+    'b-modal': MagicoModal,
 
-        'editor': Editor // <- To jest TINYMCE
-    },
-    props: {
-        modelValue: Object
-    },
-    mounted: function () {
-        this.name = (this.modelValue && this.modelValue.name) ? this.modelValue.name : this.name;
-        this.text = (this.modelValue && this.modelValue.text) ? this.modelValue.text : this.text;
-        if (this.modelValue.open) this.modalBox = true;
-        console.log('mounted textarea');
-        this.$emit('update:modelValue', this.modelValue);
-
-    },
-    data: function () {
-        return {
-            langs: {
-                saveclose: "Zapisz",
-                label: "Pole tekstowe",
-                close: "Zamknij"
-            },
-            height: window.innerHeight - window.innerHeight / 4,
-            modalBox: false,
-            text: '',
-            name: 'core_section_textarea',
-            vtinymce: Object.assign(tinymceConfig, {
-                file_picker_callback: (callback) => {
-                    if (this.$filechooser) {
-                        this.$filechooser.open({
-                            chooseCallback: function (ev) {
-                                console.log('filePathChosed', ev)
-                                callback(ev.publicUrl);
-                            }
-                        })
-                    }
-                }
-            }),
-        }
-    },
-    watch: {
-        modalBox: function () {
-            if (this.modalBox) {
-                document.addEventListener('focusin', (e) => {
-                    if (e.target.closest(".tox-tinymce-aux, .moxman-window, .tam-assetmanager-root") !== null) {
-                        e.stopImmediatePropagation();
-                    }
-                });
-            }
-            console.log('focus');
-        },
-    },
-    computed: {
-        ctext: function () {
-            return this.modelValue.text ? this.modelValue.text.replace(/<(?:.|\n)*?>/gm, '') : '';
-        }
-    },
-    methods: {
-        removeItem: function () {
-            this.$emit('itemRemoved', this.modelValue);
-        },
-        onCloseModal: function () {
-            this.modalBox = false;
-            this.$emit('update:modelValue', {
-                name: this.name,
-                text: this.text,
+    editor: Editor // <- To jest TINYMCE
+  },
+  props: {
+    modelValue: Object
+  },
+  mounted: function () {
+    this.name = this.modelValue && this.modelValue.name ? this.modelValue.name : this.name
+    this.text = this.modelValue && this.modelValue.text ? this.modelValue.text : this.text
+    if (this.modelValue.open) this.modalBox = true
+    console.log('mounted textarea')
+    this.$emit('update:modelValue', this.modelValue)
+  },
+  data: function () {
+    return {
+      langs: {
+        saveclose: 'Zapisz',
+        label: 'Pole tekstowe',
+        close: 'Zamknij'
+      },
+      height: window.innerHeight - window.innerHeight / 4,
+      modalBox: false,
+      text: '',
+      name: 'core_section_textarea',
+      vtinymce: Object.assign(tinymceConfig, {
+        file_picker_callback: (callback) => {
+          if (this.$filechooser) {
+            this.$filechooser.open({
+              chooseCallback: function (ev) {
+                console.log('filePathChosed', ev)
+                callback(ev.publicUrl)
+              }
             })
+          }
         }
+      })
+    }
+  },
+  watch: {
+    modalBox: function () {
+      if (this.modalBox) {
+        document.addEventListener('focusin', (e) => {
+          if (
+            e.target.closest('.tox-tinymce-aux, .moxman-window, .tam-assetmanager-root') !== null
+          ) {
+            e.stopImmediatePropagation()
+          }
+        })
+      }
+      console.log('focus')
+    }
+  },
+  computed: {
+    ctext: function () {
+      return this.modelValue.text ? this.modelValue.text.replace(/<(?:.|\n)*?>/gm, '') : ''
+    }
+  },
+  methods: {
+    removeItem: function () {
+      this.$emit('itemRemoved', this.modelValue)
     },
-
+    onCloseModal: function () {
+      setTimeout(
+        function () {
+          this.modalBox = false
+          this.$emit('update:modelValue', {
+            name: this.name,
+            text: this.text
+          })
+        }.bind(this),
+        200
+      )
+    }
+  }
 }
-</script>
+</script>