Improve custom amount control

fund-us/js/index.js

@@ -22,6 +22,8 @@ class PatronageForm {
 
   constructor () {
     window.addEventListener('load', this.setInitialInterfaceState.bind(this))
+
+    // TODO: Set key based on hostname.
     this.stripe = Stripe('pk_test_mLQRpGuO7qq3XMfSgwmt4n8U00FSZOIY1h')
   }
 
@@ -57,6 +59,10 @@ class PatronageForm {
       element.addEventListener('change', updateFormState)
     })
 
+    // Ensure that selecting either the button or the text input focuses the custom
+    // amount control and that focus is not lost when person clicks on already-selected control.
+    this.interface.otherDonationAmountRadioButton.addEventListener('click', updateFormState)
+    this.interface.otherDonationAmountTextInput.addEventListener('click', updateFormState)
     this.interface.otherDonationAmountTextInput.addEventListener('focus', updateFormState)
     this.interface.otherDonationAmountTextInput.addEventListener('input', updateFormState)
 
@@ -82,6 +88,8 @@ class PatronageForm {
   // Updates form state in response to interface events.
   updateFormState () {
 
+    console.log('<<< update form state >>>')
+
     // Handle the label of the submit button based on the type of donation.
     this.interface.submitButton.innerHTML = this.isPatronage ? 'Become a patron' : 'Donate'