fix(editor): Prevent default action on Enter key in commit and push dialog (#17578)

packages/frontend/editor-ui/src/components/SourceControlPushModal.ee.test.ts

@@ -616,4 +616,126 @@ describe('SourceControlPushModal', () => {
 			expect(items).toHaveLength(1);
 		});
 	});
+
+	describe('Enter key behavior', () => {
+		it('should trigger commit and push when Enter is pressed and submit is enabled', async () => {
+			const status: SourceControlledFile[] = [
+				{
+					id: 'gTbbBkkYTnNyX1jD',
+					name: 'variables',
+					type: 'variables',
+					status: 'created',
+					location: 'local',
+					conflict: false,
+					file: '',
+					updatedAt: '2024-09-20T10:31:40.000Z',
+				},
+			];
+
+			const sourceControlStore = mockedStore(useSourceControlStore);
+
+			const { getByTestId } = renderModal({
+				props: {
+					data: {
+						eventBus,
+						status,
+					},
+				},
+			});
+
+			const commitInput = getByTestId('source-control-push-modal-commit');
+			const commitMessage = 'Test commit message';
+
+			await userEvent.type(commitInput, commitMessage);
+
+			expect(getByTestId('source-control-push-modal-submit')).not.toBeDisabled();
+
+			await userEvent.type(commitInput, '{enter}');
+
+			expect(sourceControlStore.pushWorkfolder).toHaveBeenCalledWith(
+				expect.objectContaining({
+					commitMessage,
+					fileNames: expect.arrayContaining([status[0]]),
+				}),
+			);
+		});
+
+		it('should not trigger commit when Enter is pressed with empty commit message', async () => {
+			const status: SourceControlledFile[] = [
+				{
+					id: 'gTbbBkkYTnNyX1jD',
+					name: 'variables',
+					type: 'variables',
+					status: 'created',
+					location: 'local',
+					conflict: false,
+					file: '',
+					updatedAt: '2024-09-20T10:31:40.000Z',
+				},
+			];
+
+			const sourceControlStore = mockedStore(useSourceControlStore);
+
+			const { getByTestId } = renderModal({
+				props: {
+					data: {
+						eventBus,
+						status,
+					},
+				},
+			});
+
+			const commitInput = getByTestId('source-control-push-modal-commit');
+
+			expect(getByTestId('source-control-push-modal-submit')).toBeDisabled();
+
+			await userEvent.type(commitInput, '{enter}');
+
+			expect(sourceControlStore.pushWorkfolder).not.toHaveBeenCalled();
+		});
+
+		it('should not trigger commit when Enter is pressed with no items selected', async () => {
+			const status: SourceControlledFile[] = [
+				{
+					id: 'gTbbBkkYTnNyX1jD',
+					name: 'My workflow',
+					type: 'workflow',
+					status: 'created',
+					location: 'local',
+					conflict: false,
+					file: '/home/user/.n8n/git/workflows/gTbbBkkYTnNyX1jD.json',
+					updatedAt: '2024-09-20T10:31:40.000Z',
+				},
+			];
+
+			const sourceControlStore = mockedStore(useSourceControlStore);
+
+			vi.spyOn(route, 'name', 'get').mockReturnValue('SOME_OTHER_VIEW');
+			vi.spyOn(route, 'params', 'get').mockReturnValue({ name: 'differentId' });
+
+			const { getByTestId, getAllByTestId } = renderModal({
+				props: {
+					data: {
+						eventBus,
+						status,
+					},
+				},
+			});
+
+			const commitInput = getByTestId('source-control-push-modal-commit');
+			const commitMessage = 'Test commit message';
+
+			const files = getAllByTestId('source-control-push-modal-file-checkbox');
+			expect(files).toHaveLength(1);
+			expect(within(files[0]).getByRole('checkbox')).not.toBeChecked();
+
+			await userEvent.type(commitInput, commitMessage);
+
+			expect(getByTestId('source-control-push-modal-submit')).toBeDisabled();
+
+			await userEvent.type(commitInput, '{enter}');
+
+			expect(sourceControlStore.pushWorkfolder).not.toHaveBeenCalled();
+		});
+	});
 });

packages/frontend/editor-ui/src/components/SourceControlPushModal.ee.vue

@@ -864,7 +864,7 @@ function openDiffModal(id: string) {
 					:placeholder="
 						i18n.baseText('settings.sourceControl.modals.push.commitMessage.placeholder')
 					"
-					@keydown.enter="onCommitKeyDownEnter"
+					@keydown.enter.stop="onCommitKeyDownEnter"
 				/>
 				<N8nButton
 					data-test-id="source-control-push-modal-submit"