diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/__tests__/email-input.spec.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/__tests__/email-input.spec.tsx
index 360d3b0c14..30c6db5923 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/__tests__/email-input.spec.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/__tests__/email-input.spec.tsx
@@ -136,6 +136,40 @@ describe('human-input/delivery-method/recipient/email-input', () => {
expect(handleSelect).toHaveBeenCalledTimes(1)
})
+ it('should keep typing focused and stop keyboard events from reaching workflow listeners', () => {
+ const handleParentKeyDown = vi.fn()
+ const handleWindowKeyDown = vi.fn()
+ window.addEventListener('keydown', handleWindowKeyDown)
+
+ try {
+ render(
+
+
+
,
+ )
+
+ const input = screen.getByRole('textbox')
+ input.focus()
+
+ fireEvent.change(input, { target: { value: 'a' } })
+ fireEvent.keyDown(input, { key: 'a', code: 'KeyA' })
+
+ expect(document.activeElement).toBe(input)
+ expect(handleParentKeyDown).not.toHaveBeenCalled()
+ expect(handleWindowKeyDown).not.toHaveBeenCalled()
+ }
+ finally {
+ window.removeEventListener('keydown', handleWindowKeyDown)
+ }
+ })
+
it('should delete the last recipient with backspace, flag missing members as errors, and stop focusing when disabled', () => {
const handleDelete = vi.fn()
const { container, rerender } = render(
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/email-input.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/email-input.tsx
index 189a2ce1d9..017b522885 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/email-input.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/email-input.tsx
@@ -104,6 +104,8 @@ const EmailInput = ({
}
const handleKeyDown = (e: React.KeyboardEvent) => {
+ e.stopPropagation()
+
if (e.key === 'Enter' || e.key === 'Tab' || e.key === ' ' || e.key === ',') {
e.preventDefault()
handleEmailAdd()
@@ -155,6 +157,7 @@ const EmailInput = ({
sideOffset={4}
alignOffset={-40}
popupClassName="border-none bg-transparent p-0 shadow-none backdrop-blur-none"
+ popupProps={{ initialFocus: false, finalFocus: false }}
positionerProps={{ anchor: inputRef }}
>