Skip to content

Commit f712ae1

Browse files
authored
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.
1 parent 0ed2a3a commit f712ae1

File tree

5 files changed

+51
-0
lines changed

5 files changed

+51
-0
lines changed
Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"type": "Bug Fix",
3+
"description": "Amazon Q chat: Create a new prompt form does not autofocus or submit with Enter press"
4+
}

packages/core/src/amazonq/webview/ui/apps/cwChatConnector.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -160,6 +160,29 @@ export class Connector extends BaseConnector {
160160
)
161161
}
162162

163+
onFormTextualItemKeyPress = (
164+
tabId: string,
165+
event: KeyboardEvent,
166+
formData: Record<string, string>,
167+
itemId: string,
168+
eventId?: string
169+
) => {
170+
if (itemId === 'prompt-name' && event.key === 'Enter') {
171+
event.preventDefault()
172+
this.sendMessageToExtension({
173+
command: 'form-action-click',
174+
action: {
175+
id: 'submit-create-prompt',
176+
formItemValues: formData,
177+
},
178+
tabType: this.getTabType(),
179+
tabID: tabId,
180+
})
181+
return true
182+
}
183+
return false
184+
}
185+
163186
handleMessageReceive = async (messageData: any): Promise<void> => {
164187
if (messageData.type === 'chatMessage') {
165188
await this.processChatMessage(messageData)

packages/core/src/amazonq/webview/ui/connector.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -670,6 +670,20 @@ export class Connector {
670670
}
671671
}
672672

673+
onFormTextualItemKeyPress = (
674+
event: KeyboardEvent,
675+
formData: Record<string, string>,
676+
itemId: string,
677+
tabId: string,
678+
eventId?: string
679+
) => {
680+
switch (this.tabsStorage.getTab(tabId)?.type) {
681+
case 'cwc':
682+
return this.cwChatConnector.onFormTextualItemKeyPress(tabId, event, formData, itemId, eventId)
683+
}
684+
return false
685+
}
686+
673687
onCustomFormAction = (
674688
tabId: string,
675689
messageId: string | undefined,

packages/core/src/amazonq/webview/ui/main.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -777,6 +777,15 @@ export const createMynahUI = (
777777
onCustomFormAction: (tabId, action, eventId) => {
778778
connector.onCustomFormAction(tabId, undefined, action, eventId)
779779
},
780+
onFormTextualItemKeyPress: (
781+
event: KeyboardEvent,
782+
formData: Record<string, string>,
783+
itemId: string,
784+
tabId: string,
785+
eventId?: string
786+
) => {
787+
return connector.onFormTextualItemKeyPress(event, formData, itemId, tabId, eventId)
788+
},
780789
onChatPromptProgressActionButtonClicked: (tabID, action) => {
781790
connector.onCustomFormAction(tabID, undefined, action)
782791
},

packages/core/src/codewhispererChat/controllers/chat/controller.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -539,6 +539,7 @@ export class ChatController {
539539
id: 'prompt-name',
540540
type: 'textinput',
541541
mandatory: true,
542+
autoFocus: true,
542543
title: i18n('AWS.amazonq.savedPrompts.title'),
543544
placeholder: i18n('AWS.amazonq.savedPrompts.placeholder'),
544545
description: i18n('AWS.amazonq.savedPrompts.description'),

0 commit comments

Comments
 (0)