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 }} >