Implement onBlur, comma support, spaces sanitization and leading zeros

Author: (Admin) Jonathan Ruda

client/components/mma/accountoverview/updateAmount/ContributionUpdateAmountForm.tsx

@@ -160,19 +160,37 @@ export const ContributionUpdateAmountForm = (
 	};
 
 	const onChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
-		const next = event.target.value;
+		const next = event.target.value.trim();
 
 		if (next === '') {
 			setOtherAmountInput('');
 			setOtherAmount(null);
 			return;
 		}
 
-		// Whole-string match: 1+ digits, optional '.', and 0–2 fractional digits (allows '2', '2.', '2.5', '2.50').
-		if (/^\d+(?:\.\d{0,2})?$/.test(next)) {
-			setOtherAmountInput(next);
-			setOtherAmount(Number(next));
+		// Whole-string match: 1+ digits, optional '.' or ',', and 0–2 fractional digits (allows '2', '2.', '2,', '2.5', '2,50').
+		if (/^\d+(?:[.,]\d{0,2})?$/.test(next)) {
+			const normalizedValue = next.replace(',', '.');
+
+			setOtherAmountInput(normalizedValue);
+			setOtherAmount(Number(normalizedValue));
+		}
+	};
+
+	const onBlurHandler = () => {
+		let processed = otherAmountInput;
+
+		if (processed.endsWith('.')) {
+			processed = processed.slice(0, -1);
+		}
+
+		// Remove leading zeros
+		if (processed !== '' && processed !== '0') {
+			processed = processed.replace(/^0+(?=\d)/, '');
 		}
+
+		setOtherAmountInput(processed);
+		setOtherAmount(processed === '' ? null : Number(processed));
 	};
 
 	useEffect(() => {
@@ -388,6 +406,7 @@ export const ContributionUpdateAmountForm = (
 									inputMode="decimal"
 									value={otherAmountInput}
 									onChange={onChangeHandler}
+									onBlur={onBlurHandler}
 								/>
 							</div>
 						)}

cypress/tests/mocked/parallel-2/cancelContribution.cy.ts

@@ -284,7 +284,7 @@ describe('Cancel contribution', () => {
 
 		cy.findByRole('button', { name: 'Reduce amount' }).click();
 
-		cy.get('input[type="text"][inputmode="decimal"]').type('80');
+		cy.findByRole('textbox', { name: /amount/i }).type('80');
 		cy.findByRole('button', { name: 'Change amount' }).click();
 
 		cy.findByText(