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.
aws · Mar 10, 2025 · f712ae1 · f712ae1
1 parent 0ed2a3a
commit f712ae1
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 0 deletions.
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
@@ -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
@@ -160,6 +160,29 @@ export class Connector extends BaseConnector {
         )
     }
 
+    onFormTextualItemKeyPress = (
+        tabId: string,
+        event: KeyboardEvent,
+        formData: Record<string, string>,
+        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<void> => {
         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
@@ -670,6 +670,20 @@ export class Connector {
         }
     }
 
+    onFormTextualItemKeyPress = (
+        event: KeyboardEvent,
+        formData: Record<string, string>,
+        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
@@ -777,6 +777,15 @@ export const createMynahUI = (
         onCustomFormAction: (tabId, action, eventId) => {
             connector.onCustomFormAction(tabId, undefined, action, eventId)
         },
+        onFormTextualItemKeyPress: (
+            event: KeyboardEvent,
+            formData: Record<string, string>,
+            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
@@ -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'),