Fixed issue: user may navigate forward with an opened modal (#8748)

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
+  (<https://github.com/cvat-ai/cvat/pull/8748>)

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;