From 0e02081fae8ccbbebcae7c4e541a999cd4b8361e Mon Sep 17 00:00:00 2001
From: Jordan Blasenhauer <blasenhauer.jordan.dev@gmail.com>
Date: Thu, 8 Aug 2024 21:18:50 +0200
Subject: [PATCH] easy mode setting validation check working

---
 .../client/dashboard/components/Form/Easy.vue   | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/ui/client/dashboard/components/Form/Easy.vue b/src/ui/client/dashboard/components/Form/Easy.vue
index 03f33f571..4a5536dde 100644
--- a/src/ui/client/dashboard/components/Form/Easy.vue
+++ b/src/ui/client/dashboard/components/Form/Easy.vue
@@ -96,9 +96,6 @@ const data = reactive({
   isReqErr: false,
   settingErr: "",
   stepErr: "",
-  checkValidity: computed(() => {
-    setValidity();
-  }),
 });
 
 watch(
@@ -139,6 +136,18 @@ function setup() {
   setValidity();
 }
 
+/**
+ * @name listenToValidate
+ * @description Setup the needed data for the component to work properly.
+ * @returns {void}
+ */
+function listenToValidate(e) {
+  setTimeout(() => {
+    if (!e.target.closest('[data-is="form"]')) return;
+    setValidity();
+  }, 50);
+}
+
 const buttonSave = {
   id: `easy-mode-${uuidv4()}`,
   text: "action_save",
@@ -166,10 +175,12 @@ onMounted(() => {
   setup();
   // I want updatInp to access event, data.base and the container attribut
   easyForm.useListenTempFields();
+  window.addEventListener("input", listenToValidate);
 });
 
 onUnmounted(() => {
   easyForm.useUnlistenTempFields();
+  window.removeEventListener("input", listenToValidate);
 });
 </script>