diff --git a/ts/components/conversation/message/message-content/MessageContextMenu.tsx b/ts/components/conversation/message/message-content/MessageContextMenu.tsx index 97d966a81a..dee4aee162 100644 --- a/ts/components/conversation/message/message-content/MessageContextMenu.tsx +++ b/ts/components/conversation/message/message-content/MessageContextMenu.tsx @@ -80,9 +80,11 @@ export function showMessageContextMenu({ // this is quite dirty but considering that we want the context menu of the message to show on click on the attachment // and the context menu save attachment item to save the right attachment I did not find a better way for now. // NOTE: If you change this, also make sure to update the `saveAttachment()` - const attachmentIndexStr = (event?.target as any)?.parentElement?.getAttribute?.( - 'data-attachmentindex' - ); + const target = event?.target; + const attachmentIndexStr = + target instanceof Element + ? target.closest('[data-attachmentindex]')?.getAttribute('data-attachmentindex') + : undefined; const attachmentIndex = isString(attachmentIndexStr) && !isNil(toNumber(attachmentIndexStr)) ? toNumber(attachmentIndexStr) diff --git a/ts/test/components/MessageContextMenu_test.tsx b/ts/test/components/MessageContextMenu_test.tsx new file mode 100644 index 0000000000..1b46699c22 --- /dev/null +++ b/ts/test/components/MessageContextMenu_test.tsx @@ -0,0 +1,38 @@ +/* eslint-disable import/no-extraneous-dependencies */ +import { expect } from 'chai'; +import Sinon from 'sinon'; +import { showMessageContextMenu } from '../../components/conversation/message/message-content/MessageContextMenu'; +import * as contextMenu from '../../util/contextMenu'; + +describe('MessageContextMenu', () => { + afterEach(() => { + Sinon.restore(); + document.body.innerHTML = ''; + }); + + it('uses the nearest attachment index when right-clicking nested elements', () => { + const showStub = Sinon.stub(contextMenu, 'showContextMenu'); + + const attachmentWrapper = document.createElement('div'); + attachmentWrapper.setAttribute('data-attachmentindex', '2'); + + const svg = document.createElement('svg'); + const path = document.createElement('path'); + svg.appendChild(path); + attachmentWrapper.appendChild(svg); + document.body.appendChild(attachmentWrapper); + + showMessageContextMenu({ + id: 'message-context-menu', + event: { + target: path, + clientX: 40, + clientY: 60, + } as any, + }); + + expect(showStub.calledOnce).to.equal(true); + const params = showStub.firstCall.args[0] as any; + expect((params.props as any)?.dataAttachmentIndex).to.equal(2); + }); +});