Fix: context menu placed inaccessibly when triggered via keyboard nav…

…igation (#7230) Calc dropdown position by trigger button instead of pointer event
owncloud · Jul 7, 2022 · 6d99367 · 6d99367
1 parent 9f944c7
commit 6d99367
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/changelog/unreleased/bugfix-context-menu-misplaced-triggered-by-keyboard-navigation b/changelog/unreleased/bugfix-context-menu-misplaced-triggered-by-keyboard-navigation
@@ -0,0 +1,6 @@
+Bugfix: Context menu misplaced when triggered by keyboard navigation
+
+We've fixed a bug where triggering the context menu by keyboard navigation misplaced the menu and made it inaccessible.
+
+https://github.com/owncloud/web/pull/7230
+https://github.com/owncloud/web/issues/7187
diff --git a/packages/web-app-files/src/components/FilesList/ResourceTable.vue b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
@@ -135,6 +135,7 @@
         <slot name="quickActions" :resource="item" />
         <oc-button
           :id="`context-menu-trigger-${resourceDomSelector(item)}`"
+          ref="contextMenuButton"
           v-oc-tooltip="contextMenuLabel"
           :aria-label="contextMenuLabel"
           class="resource-table-btn-action-dropdown"
@@ -648,16 +649,19 @@ export default defineComponent({
       this.displayPositionedDropdown(instance._tippy, event)
     },
     displayPositionedDropdown(dropdown, event) {
+      const contextMenuButtonPos = this.$refs.contextMenuButton.$el.getBoundingClientRect()
+
       dropdown.setProps({
         getReferenceClientRect: () => ({
           width: 0,
           height: 0,
-          top: event.clientY,
-          bottom: event.clientY,
-          left: event.clientX,
-          right: event.clientX
+          top: event.pointerType === 'mouse' ? event.clientY : contextMenuButtonPos.top,
+          bottom: event.pointerType === 'mouse' ? event.clientY : contextMenuButtonPos.bottom,
+          left: event.pointerType === 'mouse' ? event.clientX : contextMenuButtonPos.x,
+          right: event.pointerType === 'mouse' ? event.clientX : contextMenuButtonPos.x
         })
       })
+
       dropdown.show()
     },
     rowMounted(resource, component) {