Merge pull request #186 from wmde/text-name-attribute

Add name field to TextInput
wmde · Sep 18, 2023 · 7d4b76e · 7d4b76e
2 parents a32b559 + 4fb7f22
commit 7d4b76e
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 0 deletions.
diff --git a/src/components/pages/membership_form/DateOfBirth.vue b/src/components/pages/membership_form/DateOfBirth.vue
@@ -4,6 +4,7 @@
 		<div class="field">
 			<TextInput
 				input-id="birthDate"
+				name="birthDate"
 				:placeholder="$t( 'membership_form_birth_date_placeholder' )"
 				v-model="formData.date.value"
 				@blur="$emit('field-changed', 'date')"

diff --git a/src/components/shared/EmailAddress.vue b/src/components/shared/EmailAddress.vue
@@ -5,6 +5,7 @@
 			<TextInput
 				type="text"
 				input-id="email"
+				name="email"
 				:placeholder="$t( 'form_for_example', { example: $t( 'donation_form_email_placeholder_vuei18n_v3' ) } )"
 				autocomplete="email"
 				v-model="formData.email.value"

diff --git a/src/components/shared/Name.vue b/src/components/shared/Name.vue
@@ -41,6 +41,7 @@
 			<div class="field">
 				<TextInput
 					class="is-medium"
+					name="firstName"
 					input-id="first-name"
 					v-model="formData.firstName.value"
 					:has-error="showError.firstName"
@@ -56,6 +57,7 @@
 			<div class="field">
 				<TextInput
 					input-id="last-name"
+					name="lastName"
 					v-model="formData.lastName.value"
 					:has-error="showError.lastName"
 					:placeholder="$t( 'form_for_example', { example: $t( 'donation_form_lastname_placeholder' ) } )"
@@ -76,6 +78,7 @@
 		<div class="field">
 			<TextInput
 				input-id="company-name"
+				name="companyName"
 				:placeholder="$t( 'form_for_example', { example: $t( 'donation_form_companyname_placeholder' ) } )"
 				autocomplete="organization"
 				v-model="formData.companyName.value"

diff --git a/src/components/shared/Postal.vue b/src/components/shared/Postal.vue
@@ -5,6 +5,7 @@
 		<div class="field">
 			<TextInput
 				input-id="street"
+				name="street"
 				:placeholder="$t( 'form_for_example', { example: $t( 'donation_form_street_placeholder' ) } )"
 				autocomplete="street-address"
 				v-model="formData.street.value"
@@ -26,6 +27,7 @@
 		<div class="field">
 			<TextInput
 				input-id="post-code"
+				name="zip"
 				v-model="formData.postcode.value"
 				:placeholder="$t( 'form_for_example', { example: $t( 'donation_form_zip_placeholder' ) } )"
 				:has-error="showError.postcode"

diff --git a/src/components/shared/form_inputs/TextInput.vue b/src/components/shared/form_inputs/TextInput.vue
@@ -4,6 +4,7 @@
 			v-if="inputType === 'text'"
 			class="input"
 			:id="inputId"
+			:name="name"
 			:class="{ 'is-danger': hasError }"
 			type="text"
 			:autocomplete="newAutocomplete"
@@ -19,6 +20,7 @@
 			v-if="inputType === 'textarea'"
 			class="textarea"
 			:id="inputId"
+			:name="name"
 			:class="{ 'is-danger': hasError }"
 			:maxlength="maxlength"
 			:value="computedValue"
@@ -44,6 +46,7 @@ export default defineComponent( {
 	name: 'TextInput',
 	props: {
 		modelValue: [ String, Number ],
+		name: String,
 		autocomplete: String,
 		maxlength: [ Number, String ],
 		hasError: Boolean,

diff --git a/tests/unit/components/pages/membership_form/__snapshots__/DateOfBirth.spec.ts.snap b/tests/unit/components/pages/membership_form/__snapshots__/DateOfBirth.spec.ts.snap
@@ -18,6 +18,7 @@ exports[`DateOfBirth.vue renders error message 1`] = `
         autocomplete="on"
         class="input is-danger"
         id="birthDate"
+        name="birthDate"
         placeholder="membership_form_birth_date_placeholder"
         type="text"
       />
@@ -59,6 +60,7 @@ exports[`DateOfBirth.vue renders field 1`] = `
         autocomplete="on"
         class="input"
         id="birthDate"
+        name="birthDate"
         placeholder="membership_form_birth_date_placeholder"
         type="text"
       />