Update default modal button handling so that pressing the Enter key c…

…licks the default button in a PositronModalDialog (#4739)
posit-dev · Sep 20, 2024 · 62ae3ce · 62ae3ce
1 parent 1279363
commit 62ae3ce
Show file tree

Hide file tree

Showing 10 changed files with 23 additions and 18 deletions.
diff --git a/src/vs/base/browser/ui/positronComponents/button/button.tsx b/src/vs/base/browser/ui/positronComponents/button/button.tsx
@@ -82,9 +82,9 @@ export const Button = forwardRef<HTMLButtonElement, PropsWithChildren<ButtonProp
 	const keyDownHandler = (e: KeyboardEvent<HTMLButtonElement>) => {
 		// Process the key down event.
 		switch (e.code) {
-			// Space or Enter trigger the onPressed event.
+			// Space triggers the onPressed event. Note: Do not add 'Enter' here. Enter is reserved
+			// for clicking the default button in modal popups and modal dialogs.
 			case 'Space':
-			case 'Enter':
 				sendOnPressed(e);
 				break;
 		}

diff --git a/src/vs/base/browser/ui/positronComponents/button/positronButton.tsx b/src/vs/base/browser/ui/positronComponents/button/positronButton.tsx
@@ -52,9 +52,9 @@ export const PositronButton = forwardRef<HTMLDivElement, PropsWithChildren<Props
 	const keyDownHandler = (e: KeyboardEvent<HTMLDivElement>) => {
 		// Process the key down event.
 		switch (e.code) {
-			// Space or Enter trigger the onPressed event.
+			// Space triggers the onPressed event. Note: Do not add 'Enter' here. Enter is reserved
+			// for clicking the default button in modal popups and modal dialogs.
 			case 'Space':
-			case 'Enter':
 				// Consume the event.
 				e.preventDefault();
 				e.stopPropagation();
@@ -123,3 +123,6 @@ export const PositronButton = forwardRef<HTMLDivElement, PropsWithChildren<Props
 		</div>
 	);
 });
+
+// Set the display name.
+PositronButton.displayName = 'PositronButton';
diff --git a/src/vs/workbench/browser/positronComponents/positronModalDialog/positronModalDialog.tsx b/src/vs/workbench/browser/positronComponents/positronModalDialog/positronModalDialog.tsx
@@ -42,8 +42,6 @@ export interface PositronModalDialogProps {
 	title: string;
 	width: number;
 	height: number;
-	enterAccepts?: boolean;
-	onAccept: () => void;
 	onCancel?: () => void;
 }
 
@@ -112,11 +110,21 @@ export const PositronModalDialog = (props: PropsWithChildren<PositronModalDialog
 
 			// Handle the event.
 			switch (e.key) {
-				// Enter accepts dialog, if configured to.
+				// Enter clicks the first default button that is not disabled, if there is one.
 				case 'Enter': {
-					consumeEvent();
-					if (props.enterAccepts && props.onAccept) {
-						props.onAccept();
+					// If the active element is a text area, return.
+					const activeElement = DOM.getDocument(dialogBoxRef.current).activeElement;
+					if (DOM.isHTMLTextAreaElement(activeElement)) {
+						return;
+					}
+
+					// Get the first default button that is not disabled. If there is one, click it.
+					const defaultButton = dialogBoxRef.current.querySelector<HTMLElement>(
+						'button.default:not([disabled])'
+					);
+					if (defaultButton) {
+						consumeEvent();
+						defaultButton.click();
 					}
 					break;
 				}

diff --git a/src/vs/workbench/browser/positronComponents/positronModalDialog/positronOKModalDialog.tsx b/src/vs/workbench/browser/positronComponents/positronModalDialog/positronOKModalDialog.tsx
@@ -20,6 +20,7 @@ import { PositronModalDialog, PositronModalDialogProps } from 'vs/workbench/brow
  */
 export interface OKModalDialogProps extends PositronModalDialogProps {
 	okButtonTitle?: string;
+	onAccept: () => void;
 }
 
 /**

diff --git a/src/vs/workbench/browser/positronNewProjectWizard/chooseNewProjectWindowModalDialog.tsx b/src/vs/workbench/browser/positronNewProjectWizard/chooseNewProjectWindowModalDialog.tsx
@@ -111,7 +111,6 @@ const ChooseNewProjectWindowModalDialog = (props: ChooseNewProjectWindowModalDia
 					'positron.chooseNewProjectWindowModalDialog.title',
 					'Create New Project'
 				))()}
-			onAccept={accept}
 		>
 			<div className='choose-new-project-window-modal-dialog'>
 				<VerticalStack>

diff --git a/src/vs/workbench/browser/positronNewProjectWizard/newProjectModalDialog.tsx b/src/vs/workbench/browser/positronNewProjectWizard/newProjectModalDialog.tsx
@@ -195,7 +195,6 @@ const NewProjectModalDialog = (props: NewProjectModalDialogProps) => {
 			renderer={props.renderer}
 			width={700} height={520}
 			title={(() => localize('positronNewProjectWizard.title', "Create New Project"))()}
-			onAccept={acceptHandler}
 			onCancel={cancelHandler}
 		>
 			<NewProjectWizardStepContainer cancel={cancelHandler} accept={acceptHandler} />

diff --git a/src/vs/workbench/contrib/positronModalDialogs/browser/positronModalDialogs.tsx b/src/vs/workbench/contrib/positronModalDialogs/browser/positronModalDialogs.tsx
@@ -117,7 +117,7 @@ export class PositronModalDialogs implements IPositronModalDialogsService {
 		};
 
 		renderer.render(
-			<PositronModalDialog renderer={renderer} title={title} width={400} height={200} onAccept={acceptHandler} onCancel={cancelHandler}>
+			<PositronModalDialog renderer={renderer} title={title} width={400} height={200} onCancel={cancelHandler}>
 				<ContentArea>
 					{renderHtml(
 						message,
@@ -188,7 +188,6 @@ export class PositronModalDialogs implements IPositronModalDialogsService {
 				title={title}
 				width={400}
 				height={200}
-				onAccept={acceptHandler}
 				onCancel={cancelHandler}
 			>
 				<ContentArea>

diff --git a/src/vs/workbench/contrib/positronPlots/browser/modalDialogs/savePlotModalDialog.tsx b/src/vs/workbench/contrib/positronPlots/browser/modalDialogs/savePlotModalDialog.tsx
@@ -282,7 +282,6 @@ const SavePlotModalDialog = (props: SavePlotModalDialogProps) => {
 			width={SAVE_PLOT_MODAL_DIALOG_WIDTH}
 			height={SAVE_PLOT_MODAL_DIALOG_HEIGHT}
 			title={(() => localize('positron.savePlotModalDialog.title', "Save Plot"))()}
-			onAccept={acceptHandler}
 			onCancel={cancelHandler}
 			renderer={props.renderer}>
 			<ContentArea>

diff --git a/src/vs/workbench/contrib/positronPlots/browser/modalDialogs/setPlotSizeModalDialog.tsx b/src/vs/workbench/contrib/positronPlots/browser/modalDialogs/setPlotSizeModalDialog.tsx
@@ -106,7 +106,6 @@ const SetPlotSizeModalDialog = (props: SetPlotSizeModalDialogProps) => {
 			width={350}
 			height={200}
 			title={(() => localize('positronSetPlotSizeModalDialogTitle', "Custom Plot Size"))()}
-			onAccept={acceptHandler}
 			onCancel={cancelHandler}>
 			<ContentArea>
 				<table>

diff --git a/...orkbench/contrib/positronVariables/browser/modalDialogs/deleteAllVariablesModalDialog.tsx b/...orkbench/contrib/positronVariables/browser/modalDialogs/deleteAllVariablesModalDialog.tsx
@@ -58,15 +58,13 @@ export const DeleteAllVariablesModalDialog = (props: DeleteAllVariablesModalDial
 			renderer={props.renderer}
 			width={375}
 			height={175}
-			enterAccepts={true}
 			title={(() => localize(
 				'positron.deleteAllVariablesModalDialogTitle',
 				"Delete All Variables"
 			))()}
 			secondaryActionTitle={(() => localize('positron.delete', "Delete"))()}
 			secondaryActionDestructive={true}
 			primaryActionTitle={(() => localize('positron.cancel', "Cancel"))()}
-			onAccept={cancelHandler}
 			onCancel={cancelHandler}
 			onSecondaryAction={acceptHandler}
 			onPrimaryAction={cancelHandler}