diff --git a/components/email/__tests__/recipient-autocomplete.test.tsx b/components/email/__tests__/recipient-autocomplete.test.tsx new file mode 100644 index 000000000..225bbabd9 --- /dev/null +++ b/components/email/__tests__/recipient-autocomplete.test.tsx @@ -0,0 +1,222 @@ +import { render, screen, waitFor, act } from '@testing-library/react'; +import { fireEvent } from '@testing-library/dom'; +import { describe, it, expect, vi, beforeEach } from 'vitest'; +import React from 'react'; +import { EmailComposer } from '../email-composer'; + +// ─── Heavy component mocks (mirrors recipient-chip-drag.test.tsx) ────────────── + +vi.mock('@/components/email/rich-text-editor', () => ({ + RichTextEditor: ({ onChange }: { onChange?: (html: string) => void }) => ( + React.createElement('div', { 'data-testid': 'rich-text-editor', onClick: () => onChange?.('') }) + ), +})); + +vi.mock('@/components/plugins/plugin-slot', () => ({ PluginSlot: () => null })); +vi.mock('@/components/identity/sub-address-helper', () => ({ SubAddressHelper: () => null })); +vi.mock('@/components/templates/template-picker', () => ({ TemplatePicker: () => null })); +vi.mock('@/components/templates/template-form', () => ({ TemplateForm: () => null })); +vi.mock('@/components/files/file-preview-modal', () => ({ FilePreviewModal: () => null })); +vi.mock('@/hooks/use-focus-trap', () => ({ + useFocusTrap: () => ({ ref: { current: null } }), +})); +vi.mock('@/hooks/use-pro-multi-account-identities', () => ({ + useProMultiAccountIdentities: () => ({ enabled: false, groups: [], allIdentities: [] }), + stripCrossAccountIdentityPrefix: (id: string) => ({ localAccountId: null, rawId: id }), +})); + +const { SUGGESTIONS } = vi.hoisted(() => ({ + SUGGESTIONS: [ + { name: 'User B', email: 'userb@example.org' }, + { name: 'User C', email: 'userc@example.org' }, + ], +})); + +// ─── Store mocks ────────────────────────────────────────────────────────────── + +vi.mock('@/stores/auth-store', () => { + const state = { + client: null, + identities: [], + primaryIdentity: null, + isAuthenticated: false, + isDemoMode: false, + activeAccountId: null, + connectionLost: false, + getClientForAccount: () => undefined, + getAllConnectedClients: () => new Map(), + syncIdentities: () => {}, + refreshIdentities: async () => {}, + }; + const hook = (sel?: (s: typeof state) => unknown) => + typeof sel === 'function' ? sel(state) : state; + hook.getState = () => state; + hook.setState = (p: Partial) => Object.assign(state, p); + return { useAuthStore: hook }; +}); + +vi.mock('@/stores/identity-store', () => { + const state = { identities: [], defaultIdentityId: null }; + const hook = (sel?: (s: typeof state) => unknown) => + typeof sel === 'function' ? sel(state) : state; + hook.getState = () => state; + hook.setState = (p: Partial) => Object.assign(state, p); + return { useIdentityStore: hook }; +}); + +vi.mock('@/stores/account-store', () => { + const state = { accounts: [], getAccountById: () => undefined }; + const hook = (sel?: (s: typeof state) => unknown) => + typeof sel === 'function' ? sel(state) : state; + hook.getState = () => state; + hook.setState = (p: Partial) => Object.assign(state, p); + return { useAccountStore: hook }; +}); + +vi.mock('@/stores/email-store', () => { + const state = { + draftSaveEnabled: false, + sendRawEmail: async () => ({ sent: true }), + }; + const hook = (sel?: (s: typeof state) => unknown) => + typeof sel === 'function' ? sel(state) : state; + hook.getState = () => state; + hook.setState = (p: Partial) => Object.assign(state, p); + return { useEmailStore: hook }; +}); + +vi.mock('@/stores/settings-store', () => { + const state = { + timeFormat: '24h', + plainTextMode: false, + subAddressDelimiter: '+', + autoSelectReplyIdentity: true, + attachmentReminderEnabled: false, + attachmentReminderKeywords: [], + sendDelaySeconds: 0, + signaturePosition: 'above_quote', + signatureSeparatorEnabled: false, + requestReadReceiptDefault: false, + addTrustedSender: () => {}, + trustedSendersAddressBook: null, + }; + const hook = (sel?: (s: typeof state) => unknown) => + typeof sel === 'function' ? sel(state) : state; + hook.getState = () => state; + hook.setState = (p: Partial) => Object.assign(state, p); + return { useSettingsStore: hook }; +}); + +vi.mock('@/stores/contact-store', () => { + const state = { + contacts: [], + getAutocomplete: (q: string) => SUGGESTIONS.filter((s) => `${s.name} ${s.email}`.toLowerCase().includes(q.toLowerCase())), + addToTrustedSendersBook: async () => {}, + }; + const hook = (sel?: (s: typeof state) => unknown) => + typeof sel === 'function' ? sel(state) : state; + hook.getState = () => state; + hook.setState = (p: Partial) => Object.assign(state, p); + return { useContactStore: hook }; +}); + +vi.mock('@/stores/template-store', () => { + const state = { templates: [], addTemplate: async () => {} }; + const hook = (sel?: (s: typeof state) => unknown) => + typeof sel === 'function' ? sel(state) : state; + hook.getState = () => state; + hook.setState = (p: Partial) => Object.assign(state, p); + return { useTemplateStore: hook }; +}); + +// ─── Misc dependency mocks ──────────────────────────────────────────────────── + +vi.mock('@/stores/toast-store', () => ({ + toast: { info: () => {}, error: () => {}, success: () => {} }, +})); + +vi.mock('@/lib/plugin-hooks', () => ({ + emailHooks: { + onComposerOpen: { call: async () => [] }, + onRecipientChange: { call: async () => [] }, + getRecipientSuggestions: { call: async () => [] }, + onSend: { call: async () => [] }, + beforeSend: { call: async () => [] }, + onRecipientChipsChange: { transform: async (chips: unknown) => chips }, + }, + contactHooks: { + search: { call: async () => [] }, + onProvideRecipientSuggestions: { transform: async (list: unknown) => list }, + }, +})); + +vi.mock('@/lib/email-sanitization', () => ({ + sanitizeSignatureHtml: (v: string) => v, + sanitizeEmailHtml: (v: string) => v, + parseHtmlSafely: (html: string) => new DOMParser().parseFromString(html, 'text/html'), +})); + +vi.mock('@/lib/reply-identity', () => ({ + resolveReplyFrom: () => null, + findComposeIdentityId: () => null, + findReplyIdentityId: () => null, + findDraftIdentityId: () => null, +})); +vi.mock('@/lib/email-threading', () => ({ + computeReplyThreadingHeaders: () => ({ inReplyTo: [], references: [] }), +})); +vi.mock('@/lib/signature-utils', () => ({ + appendPlainTextSignature: (body: string) => body, + getPlainTextSignature: () => '', +})); +vi.mock('@/lib/sub-addressing', () => ({ generateSubAddress: () => '' })); +vi.mock('@/lib/debug', () => ({ debug: () => {} })); +vi.mock('@/components/email/quoted-html', () => ({ + buildQuotedHtmlBlock: () => '', + serializeEditorContent: () => '', +})); +vi.mock('@/lib/template-utils', () => ({ substitutePlaceholders: (s: string) => s })); + +// ─── Shared test data ───────────────────────────────────────────────────────── + +const EMPTY_DATA = { + to: '', + cc: '', + bcc: '', + subject: '', + body: '', + showCc: true, + showBcc: true, + selectedIdentityId: null, + subAddressTag: '', + mode: 'compose' as const, + draftId: null, +}; + +/** next-intl is mocked to return the key, so the To placeholder is "to_placeholder". */ +const toInput = () => screen.getByPlaceholderText('to_placeholder') as HTMLInputElement; + +const type = (input: HTMLInputElement, text: string) => + fireEvent.change(input, { target: { value: text } }); + +/** Lets the 200 ms autocomplete debounce and its async merge run. */ +const settle = () => act(() => new Promise((r) => setTimeout(r, 300))); + +// ─── Tests ──────────────────────────────────────────────────────────────────── + +describe('recipient autocomplete', () => { + beforeEach(() => { vi.clearAllMocks(); }); + + it('does not reopen the suggestions after a typed address was committed', async () => { + render(); + const input = toInput(); + type(input, 'userb@example.org'); + // Enter before the debounced lookup has run. + fireEvent.keyDown(input, { key: 'Enter' }); + await settle(); + + expect(screen.getByText('userb@example.org')).toBeInTheDocument(); + expect(screen.queryByRole('listbox')).not.toBeInTheDocument(); + }); + +}); diff --git a/components/email/email-composer.tsx b/components/email/email-composer.tsx index 88f3a8796..dab9618e9 100644 --- a/components/email/email-composer.tsx +++ b/components/email/email-composer.tsx @@ -1421,6 +1421,8 @@ export function EmailComposer({ }, [autoQuery, composerClient, isSearchingServer, searchRecipients]); const insertAutocomplete = (suggestion: SuggestionItem, field: 'to' | 'cc' | 'bcc') => { + if (autocompleteTimeoutRef.current) clearTimeout(autocompleteTimeoutRef.current); + setAutoQuery(''); const setter = field === 'to' ? setTo : field === 'cc' ? setCc : setBcc; const inputSetter = field === 'to' ? setToInput : field === 'cc' ? setCcInput : setBccInput; @@ -3970,6 +3972,9 @@ function RecipientChipInput({ if (inputText.trim()) { onChipsChange([...chips, parseRecipient(inputText)]); onInputChange(''); + // Also drops the debounced lookup for the text just committed, which + // would otherwise reopen the dropdown over the next field. + onAutocomplete('', field); } };