fix(VInput): fix unable to set initialValue

docs(VInput): update TestInputState story to add new case
gitsindonesia · Jan 11, 2023 · 3273a90 · 3273a90
1 parent 96adf8e
commit 3273a90
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 9 deletions.
diff --git a/packages/forms/src/input/VInput.stories.ts b/packages/forms/src/input/VInput.stories.ts
@@ -569,11 +569,13 @@ export const TestInputState: Story<{}> = (args) => ({
   setup() {
     const modelValue = ref('');
     const modelValue2 = ref('');
+    const initialValues = ref({
+      text: args.setupWithInitialValue ? 'init' : '',
+      text2: args.setupWithInitialValue ? 'init2' : '',
+    });
+
     const {handleSubmit, resetForm, values} = args.useForm ? useForm({
-      initialValues: {
-        text: '',
-        text2: '',
-      }
+      initialValues,
     }) : {handleSubmit: (cb: any) => null, resetForm: () => null, values: {}};
 
     const onSubmit = handleSubmit((values: any) => {
@@ -584,11 +586,31 @@ export const TestInputState: Story<{}> = (args) => ({
       alert("onChange: " + val);
     };
 
-    return {args, onSubmit, resetForm, values, modelValue, modelValue2, onChange};
+    const resetVVForm = () => {
+      if(!args.useForm){
+        alert('Story is not set up with Vee Validate Form. set `useForm` control to true to try this action.')
+      }
+
+      initialValues.value = {
+        text: 'changes',
+        text2: 'change me too!'
+      };
+
+      resetForm();
+    }
+
+    return {args, onSubmit, resetForm, values, modelValue, modelValue2, onChange, resetVVForm};
   },
   template: `
-    <form @submit='onSubmit' class='border-none'>
-    <h1 class='mb-8 font-semibold'>{{ args.useForm ? 'with' : 'without' }} VeeValidate Form</h1>
+    <form @submit="onSubmit" class="border-none">
+    <h1 class="mb-8 font-semibold">{{ args.useForm ? 'with' : 'without' }} VeeValidate Form</h1>
+
+    <button 
+      type="button" @click="resetVVForm" 
+      class="bg-red-400 text-white text-sm p-2 rounded"
+    >
+      Change Initial Value & Reset Form! <span class="text-[10px]">(Vee Validate only)</span>
+    </button>
 
     <div class="flex flex-wrap">
       <div class="w-1/2 p-2">
@@ -636,6 +658,36 @@ export const TestInputState: Story<{}> = (args) => ({
         />
         <div class="text-xs">Should not change any value unless explicitly implemented</div>
       </div>
+
+      <div class="w-1/2 p-2">
+        <v-input
+          value="doremi"
+          label="Initial Value w/ value prop "
+        />
+      </div>
+
+      <div class="w-1/2 p-2">
+        <v-input
+          model-value="fasola"
+          label="Initial Value w/ modelValue prop "
+        />
+      </div>
+
+      <div class="w-1/2 p-2">
+        <v-input
+          value="initival"
+          name="init1"
+          label="Initial Value w/ value prop + name"
+        />
+      </div>
+
+      <div class="w-1/2 p-2">
+        <v-input
+          model-value="modelvalue"
+          name="init2"
+          label="Initial Value w/ modelValue prop + name"
+        />
+      </div>
     </div>
 
     <div class="mt-4">

diff --git a/packages/forms/src/input/VInput.vue b/packages/forms/src/input/VInput.vue
@@ -184,14 +184,16 @@ const isEagerValidation = computed(() => {
 });
 
 const input = ref();
-const uncontrolledValue = ref();
+const initialValue = ref(props.modelValue || props.value);
+const uncontrolledValue = ref(initialValue.value);
 
 const {
   value: vvValue,
   errorMessage,
   handleChange,
   resetField,
   setValue,
+  meta,
 } = useField(name, rules, {
   initialValue: props.modelValue || props.value,
   validateOnValueUpdate: !isEagerValidation.value,
@@ -202,7 +204,11 @@ watch(modelValue, (val) => {
 });
 
 watch(vvValue, (val) => {
-  uncontrolledValue.value = val;
+  // only use vee validate value if name is defined
+  // to prevent whole form value being passed as field value
+  if (name.value) {
+    uncontrolledValue.value = val;
+  }
 });
 
 watch(uncontrolledValue, (val) => {
@@ -213,6 +219,12 @@ watch(uncontrolledValue, (val) => {
   emit('update:modelValue', val);
 });
 
+watch(meta, (val,prev) => {
+  if (name.value && val.initialValue !== initialValue.value) {
+    initialValue.value = val.initialValue || '';
+  }
+}, {deep: true});
+
 const validationListeners = computed(() => {
   // If the field is valid or have not been validated yet
   // lazy
@@ -238,6 +250,12 @@ const clear = () => {
   emit('clear');
   input.value?.focus();
 };
+
+
+// if name is defined, we override uncontrolledValue with initialValue from veeValidate
+if(name.value) {
+  uncontrolledValue.value = meta.initialValue || "";
+}
 </script>
 
 <template>