opensource/n8n
3
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2026-09-24 23:22:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(ai-builder): Add autofocus for input field (#22919)

Browse Source
This commit is contained in:
Dimitri Lavrenük
2025-12-09 12:32:41 +01:00
committed by GitHub
parent 5214afa686
commit a08944835d
4 changed files with 39 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/frontend/@n8n/design-system/src/components/AskAssistantChat/AskAssistantChat.vue
+2
View File
@@ -499,6 +499,7 @@ defineExpose({
:max-length="maxCharacterLength"
:min-lines="2"
data-test-id="chat-suggestions-input"
autofocus
@upgrade-click="emit('upgrade-click')"
@submit="onSendMessage"
@stop="emit('stop')"
@@ -549,6 +550,7 @@ defineExpose({
:max-length="maxCharacterLength"
:refocus-after-send="true"
data-test-id="chat-input"
autofocus
@upgrade-click="emit('upgrade-click')"
@submit="onSendMessage"
@stop="emit('stop')"
packages/frontend/@n8n/design-system/src/components/AskAssistantChat/__snapshots__/AskAssistantChat.test.ts.snap
+7
View File
@@ -86,6 +86,7 @@ exports[`AskAssistantChat > limits maximum input length when maxCharacterLength
data-test-id="chat-input-wrapper"
>
<n8n-prompt-input-stub
autofocus="true"
data-test-id="chat-input"
disabled="false"
maxlength="100"
@@ -340,6 +341,7 @@ exports[`AskAssistantChat > renders chat with messages correctly 1`] = `
data-test-id="chat-input-wrapper"
>
<n8n-prompt-input-stub
autofocus="true"
data-test-id="chat-input"
disabled="false"
maxlength="5000"
@@ -442,6 +444,7 @@ exports[`AskAssistantChat > renders default placeholder chat correctly 1`] = `
data-test-id="chat-input-wrapper"
>
<n8n-prompt-input-stub
autofocus="true"
data-test-id="chat-input"
disabled="false"
maxlength="5000"
@@ -595,6 +598,7 @@ exports[`AskAssistantChat > renders end of session chat correctly 1`] = `
data-test-id="chat-input-wrapper"
>
<n8n-prompt-input-stub
autofocus="true"
data-test-id="chat-input"
disabled="true"
maxlength="5000"
@@ -729,6 +733,7 @@ exports[`AskAssistantChat > renders error message correctly with retry button 1`
data-test-id="chat-input-wrapper"
>
<n8n-prompt-input-stub
autofocus="true"
data-test-id="chat-input"
disabled="false"
maxlength="5000"
@@ -863,6 +868,7 @@ exports[`AskAssistantChat > renders message with code snippet 1`] = `
data-test-id="chat-input-wrapper"
>
<n8n-prompt-input-stub
autofocus="true"
data-test-id="chat-input"
disabled="false"
maxlength="5000"
@@ -997,6 +1003,7 @@ exports[`AskAssistantChat > renders streaming chat correctly 1`] = `
data-test-id="chat-input-wrapper"
>
<n8n-prompt-input-stub
autofocus="true"
data-test-id="chat-input"
disabled="false"
maxlength="5000"
packages/frontend/@n8n/design-system/src/components/N8nPromptInput/N8nPromptInput.test.ts
+24
View File
@@ -1074,4 +1074,28 @@ describe('N8nPromptInput', () => {
wrapper.unmount();
});
});
describe('autofocus', () => {
it('should be focused if enabled', async () => {
const { emitted } = renderComponent({
props: {
autofocus: true,
},
global: {
stubs: ['N8nCallout', 'N8nScrollArea', 'N8nSendStopButton'],
},
});
expect(emitted('focus')).toBeTruthy();
});
it('should not be focused if disabled', () => {
const { emitted } = renderComponent({
global: {
stubs: ['N8nCallout', 'N8nScrollArea', 'N8nSendStopButton'],
},
});
expect(emitted('focus')).toBeFalsy();
});
});
});
packages/frontend/@n8n/design-system/src/components/N8nPromptInput/N8nPromptInput.vue
+6
View File
@@ -22,6 +22,7 @@ export interface N8nPromptInputProps {
creditsRemaining?: number;
showAskOwnerTooltip?: boolean;
refocusAfterSend?: boolean;
autofocus?: boolean;
}
const INFINITE_CREDITS = -1;
@@ -38,6 +39,7 @@ const props = withDefaults(defineProps<N8nPromptInputProps>(), {
creditsRemaining: undefined,
showAskOwnerTooltip: false,
refocusAfterSend: false,
autofocus: false,
});
const emit = defineEmits<{
@@ -314,6 +316,10 @@ function focusInput() {
onMounted(() => {
// Adjust height on mount to respect minLines or initial content
void nextTick(() => adjustHeight());
if (props.autofocus) {
focusInput();
}
});
defineExpose({