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

1 files changed, 17 insertions, 13 deletions

diff --git a/source/features/sync-pr-commit-title.tsx b/source/features/sync-pr-commit-title.tsx
index 78e0b686..93eea6e0 100644
--- a/source/features/sync-pr-commit-title.tsx
+++ b/source/features/sync-pr-commit-title.tsx
@@ -1,8 +1,7 @@
 import React from 'dom-chef';
 import select from 'select-dom';
-import onetime from 'onetime';
 import debounce from 'debounce-fn';
-import delegate, {DelegateSubscription} from 'delegate-it';
+import delegate, {DelegateSubscription, DelegateEvent} from 'delegate-it';
 import insertTextTextarea from 'insert-text-textarea';
 import features from '../libs/features';
 import onPrMergePanelOpen from '../libs/on-pr-merge-panel-open';
@@ -26,19 +25,23 @@ const createCommitTitle = debounce<[], string>((): string => {
 	immediate: true
 });
 
-const getNote = onetime<[], HTMLElement>((): HTMLElement =>
-	<p className="note">
-		The title of this PR will be updated to match this title. <button type="button" className="btn-link muted-link text-underline" onClick={event => {
-			deinit();
-			event.currentTarget.parentElement!.remove(); // Hide note
-		}}>Cancel</button>
-	</p>
-);
+function getNote(): HTMLElement {
+	return select('.note.rgh-sync-pr-commit-title-note') ?? (
+		<p className="note rgh-sync-pr-commit-title-note">
+			The title of this PR will be updated to match this title. <button type="button" className="btn-link muted-link text-underline rgh-sync-pr-commit-title">Cancel</button>
+		</p>
+	);
+}
 
 function getPRNumber(): string {
 	return select('.gh-header-number')!.textContent!;
 }
 
+function handleCancelClick(event: DelegateEvent): void {
+	deinit();
+	event.delegateTarget.parentElement!.remove(); // Hide note
+}
+
 function maybeShowNote(): void {
 	const inputField = select<HTMLInputElement>('#merge_title_field')!;
 	const needsSubmission = createCommitTitle() !== inputField.value;
@@ -89,9 +92,10 @@ function onMergePanelOpen(event: Event): void {
 let listeners: DelegateSubscription[];
 function init(): void {
 	listeners = [
-		...delegate('#discussion_bucket', '#merge_title_field', 'input', maybeShowNote),
-		...delegate('#discussion_bucket', 'form.js-merge-pull-request', 'submit', submitPRTitleUpdate),
-		...onPrMergePanelOpen(onMergePanelOpen)
+		delegate('#merge_title_field', 'input', maybeShowNote),
+		delegate('form.js-merge-pull-request', 'submit', submitPRTitleUpdate),
+		delegate('.rgh-sync-pr-commit-title', 'click', handleCancelClick),
+		onPrMergePanelOpen(onMergePanelOpen)
 	];
 }