Keep features working after clicking the browser’s Back button (#2639)

1 files changed, 15 insertions, 15 deletions

diff --git a/source/features/limit-commit-title-length.tsx b/source/features/limit-commit-title-length.tsx
index 81d60111..ac94fc09 100644
--- a/source/features/limit-commit-title-length.tsx
+++ b/source/features/limit-commit-title-length.tsx
@@ -1,28 +1,28 @@
 import './limit-commit-title-length.css';
 import select from 'select-dom';
+import delegate, {DelegateEvent} from 'delegate-it';
 import features from '../libs/features';
 import onPrMergePanelOpen from '../libs/on-pr-merge-panel-open';
 
-function init(): void {
-	const inputField = select<HTMLInputElement>([
-		'#commit-summary-input', // Commit title on edit file page
-		'#merge_title_field' // PR merge message field
-	]);
+const fieldSelector = [
+	'#commit-summary-input', // Commit title on edit file page
+	'#merge_title_field' // PR merge message field
+].join();
 
-	// The input field doesn't exist on PR merge page if you don't have access to that repo
-	if (!inputField) {
-		return;
-	}
+function validateInput({delegateTarget: inputField}: DelegateEvent<InputEvent, HTMLInputElement>): void {
+	inputField.setCustomValidity(inputField.value.length > 72 ? `The title should be maximum 72 characters, but is ${inputField.value.length}` : '');
+}
 
-	inputField.addEventListener('input', () => {
-		inputField.setCustomValidity(inputField.value.length > 72 ? `The title should be maximum 72 characters, but is ${inputField.value.length}` : '');
-	});
+function triggerValidation(): void {
+	select(fieldSelector)!.dispatchEvent(new Event('input'));
+}
+
+function init(): void {
+	delegate(fieldSelector, 'input', validateInput);
 
 	// For PR merges, GitHub restores any saved commit messages on page load
 	// Triggering input event for these fields immediately validates the form
-	onPrMergePanelOpen(() => {
-		inputField.dispatchEvent(new Event('input'));
-	});
+	onPrMergePanelOpen(triggerValidation);
 }
 
 features.add({