From f712ae1c7a7775c353b6239669336b9f512fe136 Mon Sep 17 00:00:00 2001 From: Avi Alpert <131792194+avi-alpert@users.noreply.github.com> Date: Mon, 10 Mar 2025 14:43:31 -0400 Subject: [PATCH] fix(amazonq): keyboard navigation in "Create a new prompt" overlay #6738 ## Problem When a user selects "Create a new prompt", a mouse is required to 1) select the prompt name input field and 2) click the Enter button. This flow should be able to be completed with just the keyboard ## Solution Autofocus prompt input field, and allow submit on Enter key press. --- ...-917c4c75-6019-4d7d-a246-0248cf2be55d.json | 4 ++++ .../webview/ui/apps/cwChatConnector.ts | 23 +++++++++++++++++++ .../core/src/amazonq/webview/ui/connector.ts | 14 +++++++++++ packages/core/src/amazonq/webview/ui/main.ts | 9 ++++++++ .../controllers/chat/controller.ts | 1 + 5 files changed, 51 insertions(+) create mode 100644 packages/amazonq/.changes/next-release/Bug Fix-917c4c75-6019-4d7d-a246-0248cf2be55d.json diff --git a/packages/amazonq/.changes/next-release/Bug Fix-917c4c75-6019-4d7d-a246-0248cf2be55d.json b/packages/amazonq/.changes/next-release/Bug Fix-917c4c75-6019-4d7d-a246-0248cf2be55d.json new file mode 100644 index 00000000000..d9444168be1 --- /dev/null +++ b/packages/amazonq/.changes/next-release/Bug Fix-917c4c75-6019-4d7d-a246-0248cf2be55d.json @@ -0,0 +1,4 @@ +{ + "type": "Bug Fix", + "description": "Amazon Q chat: Create a new prompt form does not autofocus or submit with Enter press" +} diff --git a/packages/core/src/amazonq/webview/ui/apps/cwChatConnector.ts b/packages/core/src/amazonq/webview/ui/apps/cwChatConnector.ts index 995061dfd51..324616a445a 100644 --- a/packages/core/src/amazonq/webview/ui/apps/cwChatConnector.ts +++ b/packages/core/src/amazonq/webview/ui/apps/cwChatConnector.ts @@ -160,6 +160,29 @@ export class Connector extends BaseConnector { ) } + onFormTextualItemKeyPress = ( + tabId: string, + event: KeyboardEvent, + formData: Record, + itemId: string, + eventId?: string + ) => { + if (itemId === 'prompt-name' && event.key === 'Enter') { + event.preventDefault() + this.sendMessageToExtension({ + command: 'form-action-click', + action: { + id: 'submit-create-prompt', + formItemValues: formData, + }, + tabType: this.getTabType(), + tabID: tabId, + }) + return true + } + return false + } + handleMessageReceive = async (messageData: any): Promise => { if (messageData.type === 'chatMessage') { await this.processChatMessage(messageData) diff --git a/packages/core/src/amazonq/webview/ui/connector.ts b/packages/core/src/amazonq/webview/ui/connector.ts index 0c1fd264338..5159c01a991 100644 --- a/packages/core/src/amazonq/webview/ui/connector.ts +++ b/packages/core/src/amazonq/webview/ui/connector.ts @@ -670,6 +670,20 @@ export class Connector { } } + onFormTextualItemKeyPress = ( + event: KeyboardEvent, + formData: Record, + itemId: string, + tabId: string, + eventId?: string + ) => { + switch (this.tabsStorage.getTab(tabId)?.type) { + case 'cwc': + return this.cwChatConnector.onFormTextualItemKeyPress(tabId, event, formData, itemId, eventId) + } + return false + } + onCustomFormAction = ( tabId: string, messageId: string | undefined, diff --git a/packages/core/src/amazonq/webview/ui/main.ts b/packages/core/src/amazonq/webview/ui/main.ts index 9a832eaf60f..d7285d81ba5 100644 --- a/packages/core/src/amazonq/webview/ui/main.ts +++ b/packages/core/src/amazonq/webview/ui/main.ts @@ -777,6 +777,15 @@ export const createMynahUI = ( onCustomFormAction: (tabId, action, eventId) => { connector.onCustomFormAction(tabId, undefined, action, eventId) }, + onFormTextualItemKeyPress: ( + event: KeyboardEvent, + formData: Record, + itemId: string, + tabId: string, + eventId?: string + ) => { + return connector.onFormTextualItemKeyPress(event, formData, itemId, tabId, eventId) + }, onChatPromptProgressActionButtonClicked: (tabID, action) => { connector.onCustomFormAction(tabID, undefined, action) }, diff --git a/packages/core/src/codewhispererChat/controllers/chat/controller.ts b/packages/core/src/codewhispererChat/controllers/chat/controller.ts index 15e78d92e9e..c2d8bb5fd57 100644 --- a/packages/core/src/codewhispererChat/controllers/chat/controller.ts +++ b/packages/core/src/codewhispererChat/controllers/chat/controller.ts @@ -539,6 +539,7 @@ export class ChatController { id: 'prompt-name', type: 'textinput', mandatory: true, + autoFocus: true, title: i18n('AWS.amazonq.savedPrompts.title'), placeholder: i18n('AWS.amazonq.savedPrompts.placeholder'), description: i18n('AWS.amazonq.savedPrompts.description'),