Merge pull request #48 from dbssman/bugfix/47-native-handler-overwrites-value-of-custom-components

🔨 Fix custom element detection

Author: dbssman

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-form-handler",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "type": "module",
   "license": "MIT",
   "author": "Dennis R. Bosmans",

src/logic/refFn.ts

@@ -6,7 +6,7 @@ export default (name: string, _refs: Refs, values: any) => (fieldRef: any) => {
         delete _refs[name]
         return
     }
-    if (!fieldRef.nodeName || !isNativeControl(fieldRef)) {
+    if (fieldRef.$el || !fieldRef.nodeName || !isNativeControl(fieldRef)) {
         //TODO: Correctly type this in order to expect a fixed data structure
         _refs[name].ref = {
             type: 'custom'

src/useFormHandler.ts

@@ -21,7 +21,8 @@ import {
   IsValidForm,
   Refs,
   ValidationsConfiguration,
-  Unregister
+  Unregister,
+  FieldReference
 } from './types';
 import { reactive, readonly, unref, watch } from '@vue/runtime-core'
 import { isEqual } from 'lodash-es'
@@ -236,7 +237,12 @@ export const useFormHandler: UseFormHandler = ({
         isTouched: !!formState.touched[name],
       }),
       ...(native !== false && {
-        onChange: async () => await handleChange(name, getNativeFieldValue(_refs[name].ref)),
+        onChange: async () => {
+          if (!_refs[name].ref || (_refs[name].ref as FieldReference).type === 'custom') {
+            return
+          }
+          await handleChange(name, getNativeFieldValue(_refs[name].ref))
+        },
       }),
       ...(useNativeValidation && {
         ...({