diff --git a/components/email/__tests__/composer-mention.test.tsx b/components/email/__tests__/composer-mention.test.tsx index f11d5ad8f..d50d46ad5 100644 --- a/components/email/__tests__/composer-mention.test.tsx +++ b/components/email/__tests__/composer-mention.test.tsx @@ -538,6 +538,14 @@ describe('composer with the @ recipient list', () => { expect(onClose).not.toHaveBeenCalled(); }); + it('pulls the last recipient back whole on Backspace, without the key deleting its last character', async () => { + await renderComposer({ to: 'Sarah Kim ' }); + const to = within(screen.getByTestId('composer-to')).getByRole('combobox') as HTMLInputElement; + // fireEvent returns false when the handler stopped the key's default action. + expect(fireEvent.keyDown(to, { key: 'Backspace' })).toBe(false); + expect(to.value).toBe('Sarah Kim '); + }); + // The directory picker is drawn inside the composer itself, not portaled. it('lets Escape in the directory picker leave the composer alone', async () => { // Every other capability answers nothing. diff --git a/components/email/email-composer.tsx b/components/email/email-composer.tsx index 2b0a747b3..ff70190e4 100644 --- a/components/email/email-composer.tsx +++ b/components/email/email-composer.tsx @@ -5930,6 +5930,8 @@ export function RecipientChipInput({ // Backspace on an empty input pulls the last chip back into the input for // quick editing. if (e.key === 'Backspace' && !inputText && chips.length > 0) { + // Or the key goes on to delete the closing ">" of what was just put back. + e.preventDefault(); const lastChip = chips[chips.length - 1]; onChipsChange(chips.slice(0, -1)); onInputChange(formatRecipient(lastChip.name, lastChip.email));