From 24a56dafafaaa27b169398e0db04a2e80631faab Mon Sep 17 00:00:00 2001
From: Joshua Graber <joshua.d.graber@gmail.com>
Date: Tue, 18 Jun 2024 17:46:21 -0400
Subject: [PATCH] fix(components): update form to use `input` rather than
 `change`

---
 src/components/Form/PdapForm.vue  | 16 +++-------------
 src/demo/pages/SignupFormDemo.vue | 11 +++--------
 2 files changed, 6 insertions(+), 21 deletions(-)

diff --git a/src/components/Form/PdapForm.vue b/src/components/Form/PdapForm.vue
index 28bc397..f8f9613 100644
--- a/src/components/Form/PdapForm.vue
+++ b/src/components/Form/PdapForm.vue
@@ -1,11 +1,5 @@
 <template>
-	<form
-		:id="id"
-		:name="name"
-		class="pdap-form"
-		@change="change"
-		@submit.prevent="submit()"
-	>
+	<form :id="id" :name="name" class="pdap-form" @submit.prevent="submit">
 		<div
 			v-if="typeof errorMessage === 'string'"
 			class="pdap-form-error-message"
@@ -23,7 +17,7 @@
 					: ''
 			"
 			:value="values[field.name]"
-			@change="updateForm(field.name, $event)"
+			@input="updateForm(field.name, $event)"
 		/>
 		<slot />
 	</form>
@@ -107,7 +101,7 @@ function updateForm(fieldName: string, event: Event) {
 			: target.value;
 
 	values.value[fieldName] = update;
-	change();
+	emit('change', values.value);
 }
 
 // Effects
@@ -136,10 +130,6 @@ function resetForm() {
 	}, {});
 }
 
-function change() {
-	emit('change', { ...values.value });
-}
-
 async function submit() {
 	// Check form submission
 	const isValidSubmission = await v$.value.$validate();
diff --git a/src/demo/pages/SignupFormDemo.vue b/src/demo/pages/SignupFormDemo.vue
index 3dfb4b1..a6d98ed 100644
--- a/src/demo/pages/SignupFormDemo.vue
+++ b/src/demo/pages/SignupFormDemo.vue
@@ -7,7 +7,7 @@
 			:reset-on="reset"
 			name="foo"
 			@submit="onSubmit"
-			@change="handleChangeOnError"
+			@change="handleChange"
 		>
 			<Button type="submit">Submit</Button>
 		</Form>
@@ -74,10 +74,8 @@ const reset = ref(false);
 /**
  * When signing up: handles clearing pw-match form errors on change if they exist
  */
-function handleChangeOnError(formValues: Record<string, string>) {
-	console.debug('onchange', { e: error.value, formValues: formValues.value });
-
-	if (error.value && formValues.password !== formValues.confirmPassword) {
+function handleChange(formValues: Record<string, string>) {
+	if (error.value) {
 		handlePasswordValidation(formValues);
 	}
 }
@@ -87,8 +85,6 @@ function handleChangeOnError(formValues: Record<string, string>) {
  * @returns {boolean} `false` if passwords do not match, `true` if they do
  */
 function handlePasswordValidation(formValues: Record<string, string>) {
-	console.debug('validate', { e: error.value });
-
 	if (formValues.password !== formValues.confirmPassword) {
 		if (!error.value) {
 			error.value = 'Passwords do not match, please try again.';
@@ -104,7 +100,6 @@ function handlePasswordValidation(formValues: Record<string, string>) {
  * Logs user in or signs user up
  */
 function onSubmit(formValues: Record<string, string>) {
-	console.debug('onsubmit', { e: error.value });
 	if (!handlePasswordValidation(formValues)) {
 		return;
 	} else {