diff --git a/changelog.d/20241127_170908_sekachev.bs_fixed_user_may_navigate_forward_when_model_opened.md b/changelog.d/20241127_170908_sekachev.bs_fixed_user_may_navigate_forward_when_model_opened.md new file mode 100644 index 00000000000..edcc311a5ce --- /dev/null +++ b/changelog.d/20241127_170908_sekachev.bs_fixed_user_may_navigate_forward_when_model_opened.md @@ -0,0 +1,4 @@ +### Fixed + +- User may navigate forward with a keyboard when a modal opened + () diff --git a/cvat-ui/src/utils/mousetrap-react.tsx b/cvat-ui/src/utils/mousetrap-react.tsx index 791760a35bd..f7adf16930f 100644 --- a/cvat-ui/src/utils/mousetrap-react.tsx +++ b/cvat-ui/src/utils/mousetrap-react.tsx @@ -64,24 +64,29 @@ export default function GlobalHotKeys(props: Props): JSX.Element { Mousetrap.prototype.stopCallback = function (e: KeyboardEvent, element: Element, combo: string): boolean { if (element.tagName === 'INPUT' || element.tagName === 'SELECT' || element.tagName === 'TEXTAREA') { - // stop for input, select, and textarea + // do not trigger any shortcuts if input field is one of [input, select, textarea] return true; } const activeSequences = Object.values(applicationKeyMap).map((keyMap) => [...keyMap.sequences]).flat(); if (activeSequences.some((sequence) => sequence.startsWith(combo))) { + // prevent default behaviour of the event if potentially one of active shortcuts will be trigerred e?.preventDefault(); } // stop when modals are opened - const someModalsOpened = Array.from( + const anyModalsOpened = Array.from( window.document.getElementsByClassName('ant-modal'), ).some((el) => (el as HTMLElement).style.display !== 'none'); - if (someModalsOpened) { + if (anyModalsOpened) { const modalClosingSequences = ['SWITCH_SHORTCUTS', 'SWITCH_SETTINGS'] .map((key) => [...(applicationKeyMap[key]?.sequences ?? [])]).flat(); - return !modalClosingSequences.includes(combo) && !modalClosingSequences.some((seq) => seq.startsWith(combo)); + + return !modalClosingSequences.some((seq) => { + const seqFragments = seq.split('+'); + return combo.split('+').every((key, i) => seqFragments[i] === key); + }); } return false;