Merge pull request #8827 from owncloud/fix-keyboard-context-menu

Fix context menu position when opened via keyboard

changelog/unreleased/bugfix-context-menu-keyboard

@@ -0,0 +1,6 @@
+Bugfix: Opening context menu via keyboard
+
+The position of the context menu when opened via keyboard has been fixed.
+
+https://github.com/owncloud/web/pull/8827
+https://github.com/owncloud/web/issues/8232

packages/web-pkg/src/helpers/contextMenuDropdown.ts

@@ -1,11 +1,16 @@
 export const displayPositionedDropdown = (dropdown, event, contextMenuButton) => {
   const contextMenuButtonPos = contextMenuButton.$el.getBoundingClientRect()
+  const isKeyboardEvent = event.clientY === 0
+  const yValue = isKeyboardEvent
+    ? event.srcElement?.getBoundingClientRect().top || 0
+    : event.clientY
+
   dropdown.setProps({
     getReferenceClientRect: () => ({
       width: 0,
       height: 0,
-      top: event.clientY,
-      bottom: event.clientY,
+      top: yValue,
+      bottom: yValue,
       /**
        * If event type is 'contextmenu' the trigger was a right click on the table row,
        * so we render the dropdown at the position of the mouse pointer.

packages/web-pkg/tests/unit/helpers/contextMenuDropdown.spec.ts

@@ -4,7 +4,7 @@ describe('displayPositionedDropdown', () => {
   it('shows the dropdown', () => {
     const dropdown = { setProps: jest.fn(), show: jest.fn() }
     const ctxMenuBtn = { $el: { getBoundingClientRect: jest.fn() } }
-    displayPositionedDropdown(dropdown, undefined, ctxMenuBtn)
+    displayPositionedDropdown(dropdown, {}, ctxMenuBtn)
     expect(dropdown.show).toHaveBeenCalled()
   })
   it('horizontally positions the drop at the cursor for "contextmenu"-event', () => {
@@ -38,4 +38,35 @@ describe('displayPositionedDropdown', () => {
     expect(data.left).toEqual(ctxMenuBtnX)
     expect(data.right).toEqual(ctxMenuBtnX)
   })
+  it('vertically positions the drop via "clientY" if given', () => {
+    const event = { clientY: 100 }
+    let dropdownProps
+    const dropdown = {
+      setProps: jest.fn((props) => {
+        dropdownProps = props
+      }),
+      show: jest.fn()
+    }
+    const ctxMenuBtn = { $el: { getBoundingClientRect: jest.fn(() => ({ x: 200 })) } }
+    displayPositionedDropdown(dropdown, event, ctxMenuBtn)
+    const { top, bottom } = dropdownProps.getReferenceClientRect()
+    expect(top).toEqual(event.clientY)
+    expect(bottom).toEqual(event.clientY)
+  })
+  it('vertically positions the drop via the context button position if "clientY" is 0', () => {
+    const yPos = 200
+    const event = { clientY: 0, srcElement: { getBoundingClientRect: () => ({ top: yPos }) } }
+    let dropdownProps
+    const dropdown = {
+      setProps: jest.fn((props) => {
+        dropdownProps = props
+      }),
+      show: jest.fn()
+    }
+    const ctxMenuBtn = { $el: { getBoundingClientRect: jest.fn(() => ({ x: 200 })) } }
+    displayPositionedDropdown(dropdown, event, ctxMenuBtn)
+    const { top, bottom } = dropdownProps.getReferenceClientRect()
+    expect(top).toEqual(yPos)
+    expect(bottom).toEqual(yPos)
+  })
 })