Sync radio button and input field for custom amount (#653)

- add "name=amount" to group the custom amount radio item with the other amount options
- add "setCustomAmount" on click to focus the field
https://phabricator.wikimedia.org/T395021

Author: moiikana

src/components/shared/form_fields/AmountField.vue

@@ -31,7 +31,15 @@
 			<label class="form-field-amount-help-text" for="amount-custom">{{ $t('donation_form_payment_amount_label') }}</label>
 			<div class="form-field-amount-custom-euro-symbol" :class="{ active: isCustomAmount }">
 				<div class="radio radio-form-input">
-					<input type="radio" class="form-field-amount-custom-radio" :checked="isCustomAmount" aria-hidden="true" tabindex="-1"/>
+					<input
+						name="amount"
+						type="radio"
+						class="form-field-amount-custom-radio"
+						@click="setCustomAmount"
+						:checked="isCustomAmount"
+						aria-hidden="true"
+						tabindex="-1"
+					/>
 				</div>
 
 				<TextFormInput

tests/unit/components/shared/form_fields/AmountField.spec.ts

@@ -135,6 +135,15 @@ describe( 'AmountField.vue', () => {
 		expect( wrapper.find( '.form-field-amount-custom.active' ).exists() ).toBeFalsy();
 	} );
 
+	it( 'custom amount radio is not activated by click', async () => {
+		const wrapper = getWrapper();
+		const customAmountRadioElement = wrapper.find( 'input[class="form-field-amount-custom-radio"]' );
+
+		await customAmountRadioElement.trigger( 'click' );
+
+		expect( wrapper.find( '.form-field-amount-custom.active' ).exists() ).toBeFalsy();
+	} );
+
 	it( 'Checks the custom amount radio when value is custom', async () => {
 		const wrapper = getWrapper();
 		const customAmountInput = wrapper.find( '#amount-custom' );