Merge pull request #49 from dbssman/bugfix/44-native-element-refresh-when-value-is-not-set-due-to-binding-issues

dbssman · web-flow · commit 59922fbb849a · 2023-02-09T22:07:17.000+01:00
♻️ Trigger native element patch
diff --git a/package.json b/package.json
@@ -61,4 +61,4 @@
     "vitest": "^0.26.1",
     "vue-tsc": "^1.0.9"
   }
-}
+}
diff --git a/playground/App.vue b/playground/App.vue
@@ -0,0 +1,66 @@
+<template>
+    <h2>Playground</h2>
+    <input v-bind="register('playground')">
+</template>
+
+<script setup lang="ts">
+import { useFormHandler } from '../src/index'
+
+const { register } = useFormHandler();
+
+</script>
+
+<style>
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    text-align: center;
+}
+
+body {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #242424;
+    font-family: 'Open Sans', sans-serif;
+    font-size: 16px;
+    color: #42B883;
+    min-height: 100vh;
+}
+
+h2 {
+    margin: 1em;
+}
+
+label {
+    display: block;
+}
+
+form {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 1em;
+}
+
+input,
+select,
+textarea,
+button {
+    border: none;
+    border-radius: 5px;
+    width: 300px;
+    min-height: 40px;
+    background-color: #35495E;
+    color: #42B883;
+}
+
+button {
+    background-color: #42B883;
+    color: #35495E;
+    cursor: pointer;
+    text-transform: uppercase;
+    font-weight: bold;
+}
+</style>
diff --git a/playground/index.html b/playground/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Playground</title>
+</head>
+
+<body>
+    <div id="app"></div>
+    <script type="module" src="/main.ts"></script>
+</body>
+
+</html>
diff --git a/playground/main.ts b/playground/main.ts
@@ -0,0 +1,6 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+const app = createApp(App)
+
+app.mount('#app')
diff --git a/playground/public/favicon.svg b/playground/public/favicon.svg
@@ -0,0 +1,13 @@
+<svg width="320" height="320" viewBox="0 0 320 320" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1_2)">
+<rect x="160.5" y="42.5" width="139" height="44" rx="1.5" fill="#35495E" stroke="#42B883"/>
+<rect x="179.5" y="125.5" width="89" height="39" rx="1.5" fill="#35495E" stroke="#42B883"/>
+<path d="M156.536 44C158.076 41.3333 161.924 41.3333 163.464 44L295.1 272C296.64 274.667 294.715 278 291.636 278H28.3641C25.2849 278 23.3604 274.667 24.9 272L156.536 44Z" fill="#42B883"/>
+<path d="M158.268 146C159.038 144.667 160.962 144.667 161.732 146L236.21 275C236.98 276.333 236.018 278 234.478 278H85.5218C83.9822 278 83.02 276.333 83.7898 275L158.268 146Z" fill="#35495E"/>
+</g>
+<defs>
+<clipPath id="clip0_1_2">
+<rect width="320" height="320" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/playground/vite-env.d.ts b/playground/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/src/useFormHandler.ts b/src/useFormHandler.ts
@@ -27,6 +27,7 @@ import {
 import { reactive, readonly, unref, watch } from '@vue/runtime-core'
 import { isEqual } from 'lodash-es'
 import { getNativeFieldValue, validateField, validateForm, getDefaultFieldValue, refFn, transformValidations } from './logic';
+import { isNativeControl } from './utils';
 
 export const initialState = () => ({
   touched: {},
@@ -175,6 +176,14 @@ export const useFormHandler: UseFormHandler = ({
         }))) {
       values[name] = value
       setDirty(name, !isEqual(value, _getInitial(name)))
+      return
+    }
+    if (isNativeControl((Array.isArray(_refs[name].ref)
+      ? (_refs[name].ref as FieldReference[])[0]
+      : _refs[name].ref) as HTMLInputElement)) {
+      const prev = values[name]
+      values[name] = undefined
+      values[name] = prev
     }
   }
 
diff --git a/vite.config.ts b/vite.config.ts
@@ -6,10 +6,11 @@ import vue from '@vitejs/plugin-vue'
 import dts from 'vite-plugin-dts'
 
 // https://vitejs.dev/config/
-export default defineConfig({
+export default defineConfig(({ mode }) => ({
   define: {
     'import.meta.vitest': false,
   },
+  root: mode === 'development' ? 'playground' : '',
   test: {
     includeSource: ['test/*'],
     environment: 'happy-dom',
@@ -39,4 +40,4 @@ export default defineConfig({
       insertTypesEntry: true,
     }),
   ]
-})
+}))

Original file line number	Diff line number	Diff line change
`@@ -61,4 +61,4 @@`
`61`	`61`	`"vitest": "^0.26.1",`
`62`	`62`	`"vue-tsc": "^1.0.9"`
`63`	`63`	`}`
`64`		`-}`
	`64`	`+}`