fix show/hide field

webard · Aug 7, 2024 · 802f9ac · 802f9ac
1 parent eca6cd2
commit 802f9ac
Show file tree

Hide file tree

Showing 3 changed files with 51,196 additions and 9 deletions.
diff --git a/dist/css/field.css b/dist/css/field.css
diff --git a/dist/js/field.js b/dist/js/field.js
diff --git a/resources/js/components/FormField.vue b/resources/js/components/FormField.vue
@@ -1,11 +1,19 @@
 <template>
-    <DefaultField :field="field" :errors="errors" :show-help-text="showHelpText" :full-width-content="fullWidthContent">
+    <DefaultField
+        :field="currentField"
+        :errors="errors"
+        :show-help-text="showHelpText"
+        :full-width-content="fullWidthContent">
         <template #field>
-
             <a ref="emojianchor"></a>
-            <textarea ref="editor" :id="field.attribute" :class="errorClasses" class="w-full" style="height:200px"
-                :value="value" />
-
+            <textarea
+                ref="editor"
+                :id="field.attribute"
+                :class="errorClasses"
+                class="w-full"
+                style="height:200px"
+                :value="value"
+            />
         </template>
     </DefaultField>
 </template>
@@ -30,6 +38,16 @@ export default {
         }
     },
 
+    watch: {
+    currentlyIsVisible(current, previous) {
+      if (current === true && previous === false) {
+        this.$nextTick(() => this.handleShowingComponent())
+      } else if (current === false && previous === true) {
+        this.handleHidingComponent()
+      }
+    },
+  },
+
     created() {
         this.setInitialValue()
     },
@@ -62,6 +80,10 @@ export default {
 
         
 
+        },
+
+        destroyEditor() {
+            // this.editor.destroy();
         },
         /*
          * Set the initial, internal value for the field.
@@ -87,6 +109,14 @@ export default {
             this.handleChange(this.currentField.value ?? this.value)
             this.index++
         },
+
+        handleShowingComponent() {
+            this.initEditor();
+        },
+
+        handleHidingComponent() {
+            this.destroyEditor()        
+        },
     },
 }
 </script>