Donor Dashboard Verify Email silently does nothing when browser autofill does not update React state

[g3sf]

User Story

As a donor using Email Access, I want the Donor Dashboard to send the verification link when the email field is visibly populated by my browser so that I can access my donation history.

Details

In GiveWP 4.16.3, the Donor Dashboard email field can display a browser-autofilled email address while the React email state remains an empty string.

The submit handler in src/DonorDashboards/resources/js/app/components/auth-modal/index.js only calls the verification API inside if (email). When the DOM value and React state diverge, clicking Verify Email silently exits:

• no POST is sent to /wp-json/give-api/v2/donor-dashboard/verify-email
• the button does not advance to Email Sent
• no validation or error is displayed
• no email is generated because the request never reaches WordPress

This was observed in Chromium-based browsers across multiple computers. It can also be reproduced deterministically by populating the input's DOM value without dispatching the React onChange handler, which simulates the autofill/state mismatch.

The same state-gated implementation is currently present on the develop branch.

Steps to Reproduce

1. Enable GiveWP Donor Email Access.
2. Visit the Donor Dashboard while logged out.
3. Allow the browser or a password manager to autofill the donation email field without manually editing it.
4. Confirm that the email address is visibly present.
5. Click Verify Email.
6. Inspect the Network panel.

Current Behavior

The form can appear to contain a valid email, but no verify-email request is sent when React's email state is still empty. The action fails silently.

A deterministic test confirmed the mismatch as:

• DOM input value: populated email
• React-controlled value: ""
• verify-email requests: 0

After explicitly synchronizing the React onChange state, the same form sends the POST successfully and the access email is generated.

Expected Behavior

Submitting a visibly populated, valid email field should always send the verification request or show an actionable validation/error message.

Possible Solution

On submit, read the current form/input value instead of relying exclusively on potentially stale React state. For example:

• give the control name="email", type="email", and autoComplete="email"
• read the value from FormData(e.currentTarget) or an input ref in handleVerifyEmail
• validate that submitted value before calling verifyEmailWithAPI
• show an explicit validation message if no usable value is available

This would also make the input's browser-autofill semantics clearer.

Relevant Source

• Release 4.16.3: https://github.com/impress-org/givewp/blob/4.16.3/src/DonorDashboards/resources/js/app/components/auth-modal/index.js
• Current develop branch: https://github.com/impress-org/givewp/blob/develop/src/DonorDashboards/resources/js/app/components/auth-modal/index.js
• Text control: https://github.com/impress-org/givewp/blob/develop/src/DonorDashboards/resources/js/app/components/text-control/index.js