touchscreen longpress displays context menu (#4104)

Fixes the issue where long press would not open up
context menu in a virtualized table and tab bar because
it was handled in mousedown events that longpress on a
touchscreen does not dispatch.

This behavior is still observed in the scrollable area
of the reader and the note editor.

Addresses: zotero#4094
This commit is contained in:
abaevbog 2024-05-13 19:03:29 -04:00 committed by GitHub
parent 31616af2af
commit 7091fa3a58
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 20 additions and 15 deletions

View file

@ -111,15 +111,8 @@ const TabBar = forwardRef(function (props, ref) {
function handleTabMouseDown(event, id) {
// Don't select tab if it'll be closed with middle button click on mouse up
if (event.button === 1) {
return;
}
if (event.button === 2) {
let { screenX, screenY } = event;
// Popup gets immediately closed without this
setTimeout(() => {
props.onContextMenu(screenX, screenY, id);
}, 0);
// or on right-click
if ([1, 2].includes(event.button)) {
return;
}
@ -130,6 +123,14 @@ const TabBar = forwardRef(function (props, ref) {
event.stopPropagation();
}
function handleContextMenu(event, id) {
let { screenX, screenY } = event;
// Popup gets immediately closed without this
setTimeout(() => {
props.onContextMenu(screenX, screenY, id);
});
}
function handleTabClick(event, id) {
if (event.button === 1) {
props.onTabClose(id);
@ -270,6 +271,7 @@ const TabBar = forwardRef(function (props, ref) {
className={cx('tab', { selected, dragging: dragging && id === dragIDRef.current })}
draggable={true}
onMouseDown={(event) => handleTabMouseDown(event, id)}
onContextMenu={(event) => handleContextMenu(event, id)}
onClick={(event) => handleTabClick(event, id)}
onAuxClick={(event) => handleTabClick(event, id)}
onDragStart={(event) => handleDragStart(event, id, index)}

View file

@ -718,18 +718,20 @@ class VirtualizedTable extends React.Component {
_handleMouseDown = async (e, index) => {
const modifierClick = e.shiftKey || e.ctrlKey || e.metaKey;
if (e.button == 2) {
if (!modifierClick && !this.selection.isSelected(index)) {
this._onSelection(index, false, false);
}
this.props.onItemContextMenu(e, e.screenX, e.screenY);
}
// All modifier clicks handled in mouseUp per mozilla itemtree convention
if (!modifierClick && !this.selection.isSelected(index)) {
this._onSelection(index, false, false);
}
this.focus();
}
_handleContextMenu = async (e, index) => {
if (!this.selection.isSelected(index)) {
this._onSelection(index, false, false);
}
this.props.onItemContextMenu(e, e.screenX, e.screenY);
this.focus();
}
_handleMouseUp = async (e, index) => {
const shiftSelect = e.shiftKey;
@ -1148,6 +1150,7 @@ class VirtualizedTable extends React.Component {
node.addEventListener('dragstart', e => this._onDragStart(e, index), { passive: true });
node.addEventListener('dragend', e => this._onDragEnd(e, index), { passive: true });
node.addEventListener('mousedown', e => this._handleMouseDown(e, index), { passive: true });
node.addEventListener('contextmenu', e => this._handleContextMenu(e, index), { passive: true });
node.addEventListener('mouseup', e => this._handleMouseUp(e, index), { passive: true });
node.addEventListener('dblclick', e => this._activateNode(e, [index]), { passive: true });
}