fix: Prevent shortcuts from triggering in actions popup
This commit is contained in:
@@ -8,6 +8,7 @@ import PropTypes from 'prop-types';
|
|||||||
import { useDispatch, useSelector } from 'react-redux';
|
import { useDispatch, useSelector } from 'react-redux';
|
||||||
import { push } from '../../../lib/redux-router';
|
import { push } from '../../../lib/redux-router';
|
||||||
import { useDidUpdate } from '../../../lib/hooks';
|
import { useDidUpdate } from '../../../lib/hooks';
|
||||||
|
import { closePopup } from '../../../lib/popup';
|
||||||
|
|
||||||
import store from '../../../store';
|
import store from '../../../store';
|
||||||
import selectors from '../../../selectors';
|
import selectors from '../../../selectors';
|
||||||
@@ -81,7 +82,7 @@ const ShortcutsProvider = React.memo(({ children }) => {
|
|||||||
}, [cardId, boardId]);
|
}, [cardId, boardId]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleCardOpen = () => {
|
const handleCardOpen = (event) => {
|
||||||
if (!selectedCardRef.current) {
|
if (!selectedCardRef.current) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -93,6 +94,9 @@ const ShortcutsProvider = React.memo(({ children }) => {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
closePopup();
|
||||||
dispatch(push(Paths.CARDS.replace(':id', card.id)));
|
dispatch(push(Paths.CARDS.replace(':id', card.id)));
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -119,7 +123,7 @@ const ShortcutsProvider = React.memo(({ children }) => {
|
|||||||
selectedCardRef.current.editName();
|
selectedCardRef.current.editName();
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleCardArchive = () => {
|
const handleCardArchive = (event) => {
|
||||||
if (!selectedCardRef.current) {
|
if (!selectedCardRef.current) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -138,6 +142,7 @@ const ShortcutsProvider = React.memo(({ children }) => {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
event.preventDefault();
|
||||||
selectedCardRef.current.openActions(CardActionsStep.StepTypes.ARCHIVE);
|
selectedCardRef.current.openActions(CardActionsStep.StepTypes.ARCHIVE);
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -187,7 +192,7 @@ const ShortcutsProvider = React.memo(({ children }) => {
|
|||||||
selectedCardRef.current.openActions(CardActionsStep.StepTypes.LABELS);
|
selectedCardRef.current.openActions(CardActionsStep.StepTypes.LABELS);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleLabelToCardAdd = (index) => {
|
const handleLabelToCardAdd = (event) => {
|
||||||
if (!selectedCardRef.current) {
|
if (!selectedCardRef.current) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -206,12 +211,14 @@ const ShortcutsProvider = React.memo(({ children }) => {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const index = event.code === 'Digit0' ? 10 : parseInt(event.code.slice(-1), 10) - 1;
|
||||||
const label = selectors.selectLabelsForCurrentBoard(state)[index];
|
const label = selectors.selectLabelsForCurrentBoard(state)[index];
|
||||||
|
|
||||||
if (!label) {
|
if (!label) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
event.preventDefault();
|
||||||
const labelIds = selectors.selectLabelIdsByCardId(state, card.id);
|
const labelIds = selectors.selectLabelIdsByCardId(state, card.id);
|
||||||
|
|
||||||
if (labelIds.includes(label.id)) {
|
if (labelIds.includes(label.id)) {
|
||||||
@@ -233,7 +240,7 @@ const ShortcutsProvider = React.memo(({ children }) => {
|
|||||||
switch (event.code) {
|
switch (event.code) {
|
||||||
case 'KeyE':
|
case 'KeyE':
|
||||||
case 'Enter':
|
case 'Enter':
|
||||||
handleCardOpen();
|
handleCardOpen(event);
|
||||||
|
|
||||||
break;
|
break;
|
||||||
case 'KeyL':
|
case 'KeyL':
|
||||||
@@ -249,7 +256,7 @@ const ShortcutsProvider = React.memo(({ children }) => {
|
|||||||
|
|
||||||
break;
|
break;
|
||||||
case 'KeyV':
|
case 'KeyV':
|
||||||
handleCardArchive();
|
handleCardArchive(event);
|
||||||
|
|
||||||
break;
|
break;
|
||||||
case 'Digit1':
|
case 'Digit1':
|
||||||
@@ -261,12 +268,10 @@ const ShortcutsProvider = React.memo(({ children }) => {
|
|||||||
case 'Digit7':
|
case 'Digit7':
|
||||||
case 'Digit8':
|
case 'Digit8':
|
||||||
case 'Digit9':
|
case 'Digit9':
|
||||||
case 'Digit0': {
|
case 'Digit0':
|
||||||
const index = event.code === 'Digit0' ? 10 : parseInt(event.code.slice(-1), 10) - 1;
|
handleLabelToCardAdd(event);
|
||||||
handleLabelToCardAdd(index);
|
|
||||||
|
|
||||||
break;
|
break;
|
||||||
}
|
|
||||||
default:
|
default:
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -133,8 +133,6 @@ const Card = React.memo(({ id, isInline }) => {
|
|||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={classNames(styles.wrapper, isHighlightedAsRecent && styles.wrapperRecent, 'card')}
|
className={classNames(styles.wrapper, isHighlightedAsRecent && styles.wrapperRecent, 'card')}
|
||||||
onMouseEnter={handleMouseEnter}
|
|
||||||
onMouseLeave={handleCardMouseLeave}
|
|
||||||
>
|
>
|
||||||
{card.isPersisted ? (
|
{card.isPersisted ? (
|
||||||
<>
|
<>
|
||||||
@@ -142,6 +140,8 @@ const Card = React.memo(({ id, isInline }) => {
|
|||||||
jsx-a11y/no-static-element-interactions */}
|
jsx-a11y/no-static-element-interactions */}
|
||||||
<div
|
<div
|
||||||
className={classNames(styles.content, card.isClosed && styles.contentDisabled)}
|
className={classNames(styles.content, card.isClosed && styles.contentDisabled)}
|
||||||
|
onMouseEnter={handleMouseEnter}
|
||||||
|
onMouseLeave={handleCardMouseLeave}
|
||||||
onClick={handleClick}
|
onClick={handleClick}
|
||||||
onContextMenu={handleContextMenu}
|
onContextMenu={handleContextMenu}
|
||||||
>
|
>
|
||||||
|
|||||||
Reference in New Issue
Block a user