Web: Fix tapping outside alert/confirm dialogs doesn't dismiss them correctly (#12144)

packages/app-mobile/components/DialogManager/hooks/useDialogControl.ts

@@ -51,7 +51,10 @@ const useDialogControl = (setPromptDialogs: SetPromptDialogs) => {
 								button.onPress?.();
 							},
 						})),
-						onDismiss: cancelable ? () => onDismiss(dialog) : null,
+						onDismiss: cancelable ? () => {
+							options?.onDismiss?.();
+							onDismiss(dialog);
+						} : null,
 					};
 
 					setPromptDialogs(dialogs => {

packages/app-mobile/components/DialogManager/types.ts

@@ -12,6 +12,7 @@ export interface PromptButtonSpec extends BaseButtonSpec {
 }
 
 export interface PromptOptions {
+	onDismiss?(): void;
 	cancelable?: boolean;
 }
 

packages/app-mobile/utils/makeShowMessageBox.test.ts

@@ -1,14 +1,15 @@
+import { MessageBoxType } from '@joplin/lib/shim';
 import { DialogControl } from '../components/DialogManager';
 import { PromptButtonSpec } from '../components/DialogManager/types';
 import makeShowMessageBox from './makeShowMessageBox';
 
-type OnPrompt = (buttons: PromptButtonSpec[])=> void;
+type OnPrompt = (buttons: PromptButtonSpec[], onDismiss: ()=> void)=> void;
 const makeMockDialogControl = (onPrompt: OnPrompt): DialogControl => {
 	return {
 		info: jest.fn(),
 		error: jest.fn(),
-		prompt: jest.fn((_title, _message, buttons) => {
-			onPrompt(buttons);
+		prompt: jest.fn((_title, _message, buttons, options) => {
+			onPrompt(buttons, options.onDismiss);
 		}),
 		showMenu: jest.fn(),
 	};
@@ -24,4 +25,16 @@ describe('makeShowMessageBox', () => {
 		const okButtonIndex = 0;
 		expect(await showMessageBox('test')).toBe(okButtonIndex);
 	});
+
+	test('should resolve to the index of the cancel button when cancelled', async () => {
+		const dialogControl = makeMockDialogControl((_buttons, onDismiss) => {
+			// Cancel
+			onDismiss();
+		});
+
+		const showMessageBox = makeShowMessageBox({ current: dialogControl });
+		expect(await showMessageBox('test')).toBe(1); // Cancel button index
+		// Should resolve to -1 when there is no cancel button
+		expect(await showMessageBox('test', { type: MessageBoxType.Error })).toBe(-1);
+	});
 });

packages/app-mobile/utils/makeShowMessageBox.ts

@@ -30,12 +30,15 @@ const makeShowMessageBox = (dialogControl: null|RefObject<DialogControl>) => (me
 				};
 			});
 		}
+		// This will be -1 for dialogs that don't include the default "cancel" button
+		const cancelIndex = buttons.indexOf(cancelButton);
 
 		// Web doesn't support Alert.alert -- prefer using the global dialogControl if available.
 		(dialogControl?.current?.prompt ?? Alert.alert)(
 			options?.title ?? '',
 			message,
 			buttons,
+			{ onDismiss: () => resolve(cancelIndex) },
 		);
 	});
 };