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:
parent
31616af2af
commit
7091fa3a58
2 changed files with 20 additions and 15 deletions
|
@ -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)}
|
||||
|
|
|
@ -718,12 +718,6 @@ 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);
|
||||
|
@ -731,6 +725,14 @@ class VirtualizedTable extends React.Component {
|
|||
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;
|
||||
const augment = e.ctrlKey || e.metaKey;
|
||||
|
@ -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 });
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue