Plugins: Resolves #4474: Focus dialog when it is opened so that ENTER/ESC shortcuts work

packages/app-cli/tests/support/plugins/dialog/src/index.ts

@@ -5,9 +5,9 @@ joplin.plugins.register({
 		const dialogs = joplin.views.dialogs;
 
 		const handle = await dialogs.create('myDialog1');
-		await dialogs.setHtml(handle, '<p>Testing dialog with default buttons</p><p>Second line</p><p>Third line</p>');
+		await dialogs.setHtml(handle, '<p>Testing dialog with default buttons</p><p>Second line</p><p>Third linexxx</p>');
 		const result = await dialogs.open(handle);
-		alert('Got result: ' + JSON.stringify(result));
+		console.info('Got result: ' + JSON.stringify(result));
 
 		const handle2 = await dialogs.create('myDialog2');
 		await dialogs.setHtml(handle2, '<p>Testing dialog with custom buttons</p><p>Second line</p><p>Third line</p>');
@@ -25,7 +25,7 @@ joplin.plugins.register({
 		]);
 
 		const result2 = await dialogs.open(handle2);
-		alert('Got result: ' + JSON.stringify(result2));
+		console.info('Got result: ' + JSON.stringify(result2));
 
 		const handle3 = await dialogs.create('myDialog3');
 		await dialogs.setHtml(handle3, `
@@ -38,7 +38,7 @@ joplin.plugins.register({
 		`);
 
 		const result3 = await dialogs.open(handle3);
-		alert('Got result: ' + JSON.stringify(result3));		
+		console.info('Got result: ' + JSON.stringify(result3));		
 	},
 
 });

packages/app-desktop/services/plugins/UserWebview.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useRef, useImperativeHandle, forwardRef } from 'react';
+import { useRef, useImperativeHandle, forwardRef, useEffect } from 'react';
 import useViewIsReady from './hooks/useViewIsReady';
 import useThemeCss from './hooks/useThemeCss';
 import useContentSize from './hooks/useContentSize';
@@ -23,8 +23,9 @@ export interface Props {
 	fitToContent?: boolean;
 	borderBottom?: boolean;
 	theme?: any;
-	onSubmit?: any;
-	onDismiss?: any;
+	onSubmit?: Function;
+	onDismiss?: Function;
+	onReady?: Function;
 }
 
 const StyledFrame = styled.iframe`
@@ -66,6 +67,10 @@ function UserWebview(props: Props, ref: any) {
 	const isReady = useViewIsReady(viewRef);
 	const cssFilePath = useThemeCss({ pluginId: props.pluginId, themeId: props.themeId });
 
+	useEffect(() => {
+		if (isReady && props.onReady) props.onReady();
+	}, [isReady]);
+
 	function frameWindow() {
 		if (!viewRef.current) return null;
 		return viewRef.current.contentWindow;
@@ -89,6 +94,9 @@ function UserWebview(props: Props, ref: any) {
 					return null;
 				}
 			},
+			focus: function() {
+				if (viewRef.current) viewRef.current.focus();
+			},
 		};
 	});
 

packages/app-desktop/services/plugins/UserWebviewDialog.tsx

@@ -94,6 +94,13 @@ export default function UserWebviewDialog(props: Props) {
 		}
 	}, [buttons]);
 
+	const onReady = useCallback(() => {
+		// We focus the dialog once it's ready to make sure that the ESC/Enter
+		// keyboard shortcuts are working.
+		// https://github.com/laurent22/joplin/issues/4474
+		if (webviewRef.current) webviewRef.current.focus();
+	}, []);
+
 	return (
 		<StyledRoot>
 			<Dialog>
@@ -109,6 +116,7 @@ export default function UserWebviewDialog(props: Props) {
 						fitToContent={true}
 						onSubmit={onSubmit}
 						onDismiss={onDismiss}
+						onReady={onReady}
 					/>
 				</UserWebViewWrapper>
 				<UserWebviewDialogButtonBar buttons={buttons}/>