feat(QForm): further polish; revert activated/deactivated

quasarframework · Sep 20, 2022 · 4dd6385 · 4dd6385
1 parent ad596fd
commit 4dd6385
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 57 deletions.
diff --git a/ui/src/components/form/QForm.js b/ui/src/components/form/QForm.js
@@ -5,6 +5,7 @@ import { stopAndPrevent } from '../../utils/event.js'
 import { addFocusFn } from '../../utils/private/focus-manager.js'
 import { hSlot } from '../../utils/private/render.js'
 import { formKey } from '../../utils/private/symbols.js'
+import { vmIsDestroyed } from '../../utils/private/vm.js'
 
 export default createComponent({
   name: 'QForm',
@@ -39,11 +40,6 @@ export default createComponent({
       }
 
       const validateComponent = comp => {
-        // is it still registered (being registered implies mounted and activated)
-        if (registeredComponents.includes(comp) === false) {
-          return Promise.resolve({ valid: true })
-        }
-
         const valid = comp.validate()
 
         return typeof valid.then === 'function'
@@ -77,27 +73,22 @@ export default createComponent({
 
         // if not outdated already
         if (index === validateIndex) {
-          // Do we still have errors with active components?
-          // They might have been destroyed while we validated;
-          // Being registered implies mounted and activated
-          const activeErrors = errors.find(
-            entry => registeredComponents.includes(entry.comp) === true
-          )
+          const { comp, err } = errors[ 0 ]
 
-          if (activeErrors !== void 0) {
-            const { comp, err } = activeErrors
+          err !== void 0 && console.error(err)
+          emitEvent(false, comp)
 
-            err !== void 0 && console.error(err)
-            emitEvent(false, comp)
+          if (focus === true) {
+            // Try to focus first mounted and active component
+            const activeError = errors.find(({ comp }) => (
+              typeof comp.focus === 'function'
+              && vmIsDestroyed(comp.$) === false
+            ))
 
-            if (focus === true && typeof comp.focus === 'function') {
-              comp.focus()
+            if (activeError !== void 0) {
+              activeError.comp.focus()
             }
           }
-          else {
-            emitEvent(true)
-            return true
-          }
         }
 
         return false

diff --git a/ui/src/components/form/QFormChildMixin.js b/ui/src/components/form/QFormChildMixin.js
@@ -1,18 +1,6 @@
 import { noop } from '../../utils/event.js'
 import { formKey } from '../../utils/private/symbols.js'
 
-// register component to parent QForm
-function login (vm) {
-  const $form = vm.$.provides[ formKey ]
-  $form !== void 0 && vm.disable !== true && $form.bindComponent(vm)
-}
-
-// un-register component from parent QForm
-function logout (vm) {
-  const $form = vm.$.provides[ formKey ]
-  $form !== void 0 && vm.disable !== true && $form.unbindComponent(vm)
-}
-
 export default {
   inject: {
     [ formKey ]: {
@@ -40,19 +28,15 @@ export default {
     resetValidation () {}
   },
 
-  created () {
-    login(this)
-  },
-
-  activated () {
-    login(this)
-  },
-
-  deactivated () {
-    logout(this)
+  mounted () {
+    // register to parent QForm
+    const $form = this.$.provides[ formKey ]
+    $form !== void 0 && this.disable !== true && $form.bindComponent(this)
   },
 
   beforeUnmount () {
-    logout(this)
+    // un-register from parent QForm
+    const $form = this.$.provides[ formKey ]
+    $form !== void 0 && this.disable !== true && $form.unbindComponent(this)
   }
 }
diff --git a/ui/src/composables/use-form-child.js b/ui/src/composables/use-form-child.js
@@ -1,4 +1,4 @@
-import { inject, watch, onBeforeUnmount, getCurrentInstance, onActivated, onDeactivated } from 'vue'
+import { inject, watch, getCurrentInstance, onMounted, onBeforeUnmount } from 'vue'
 
 import { formKey } from '../utils/private/symbols.js'
 
@@ -21,21 +21,15 @@ export default function ({ validate, resetValidation, requiresQForm }) {
       }
     })
 
-    // register component to parent QForm
-    function login () {
+    onMounted(() => {
+      // register to parent QForm
       props.disable !== true && $form.bindComponent(proxy)
-    }
+    })
 
-    // un-register component from parent QForm
-    function logout () {
+    onBeforeUnmount(() => {
+      // un-register from parent QForm
       props.disable !== true && $form.unbindComponent(proxy)
-    }
-
-    login()
-
-    onActivated(login)
-    onDeactivated(logout)
-    onBeforeUnmount(logout)
+    })
   }
   else if (requiresQForm === true) {
     console.error('Parent QForm not found on useFormChild()!')