Do not trigger hotkeys when modals are opened

CHANGELOG.md

@@ -26,6 +26,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Issues can be created many times when initial submit (<https://github.com/opencv/cvat/pull/6758>)
 - Running deep learning models on non-jpeg compressed tif images (<https://github.com/opencv/cvat/pull/6789>)
 - Paddings on tasks/projects/models pages (<https://github.com/opencv/cvat/pull/6778>)
+- Hotkeys handlers triggered instead of default behaviour with focus when modal windows opened
+ (<https://github.com/opencv/cvat/pull/6800>)
+- Need to move a mouse to use brush/eraser, just click not enough (<https://github.com/opencv/cvat/pull/6800>)
 - Memory leak in the logging system (<https://github.com/opencv/cvat/pull/6804>)
 
 ### Security

cvat-canvas/src/typescript/masksHandler.ts

@@ -359,6 +359,8 @@ export class MasksHandlerImpl implements MasksHandler {
                 if (!continueInserting) {
                     this.releasePaste();
                 }
+            } else {
+                this.canvas.fire('mouse:move', options);
             }
         });
 

cvat-ui/src/components/annotation-page/standard-workspace/remove-confirm.tsx

@@ -70,7 +70,8 @@ export default function RemoveConfirmComponent(): JSX.Element | null {
             visible={visible}
             onOk={onOk}
             onCancel={onCancel}
-            className='cvat-modal-confirm'
+            destroyOnClose
+            className='cvat-modal-confirm-remove-object'
         >
             <div>
                 {description}

cvat-ui/src/utils/mousetrap-react.tsx

@@ -52,6 +52,26 @@ export default function GlobalHotKeys(props: Props): JSX.Element {
     return children || <></>;
 }
 
+Mousetrap.prototype.stopCallback = function (e: KeyboardEvent, element: Element, combo: string): boolean {
+    // if the element has the class "mousetrap" then no need to stop
+    if ((` ${(element as HTMLElement).className} `).indexOf(' mousetrap ') > -1) {
+        return false;
+    }
+
+    // stop when modals are opened
+    const someModalsOpened = Array.from(
+        window.document.getElementsByClassName('ant-modal'),
+    ).some((el) => (el as HTMLElement).style.display !== 'none');
+    if (someModalsOpened && !['f1', 'f2'].includes(combo)) {
+        return true;
+    }
+
+    // stop for input, select, and textarea
+    return element.tagName === 'INPUT' ||
+        element.tagName === 'SELECT' ||
+        element.tagName === 'TEXTAREA';
+};
+
 export function getApplicationKeyMap(): KeyMap {
     return {
         ...applicationKeyMap,

tests/cypress/e2e/actions_objects/case_24_delete_unlock_lock_object.js

@@ -25,12 +25,10 @@ context('Delete unlock/lock object', () => {
         });
     }
 
-    function deleteObjectViaShortcut(shortcut, stateLockObject) {
-        if (stateLockObject === 'unlock') {
-            cy.get('.cvat-canvas-container').within(() => {
-                cy.get('.cvat_canvas_shape').trigger('mousemove').should('have.class', 'cvat_canvas_shape_activated');
-            });
-        }
+    function deleteObjectViaShortcut(shortcut) {
+        cy.get('body').click();
+        cy.get('.cvat-objects-sidebar-state-item').trigger('mouseover');
+        cy.get('.cvat-objects-sidebar-state-item').should('have.class', 'cvat-objects-sidebar-state-active-item');
         cy.get('body').type(shortcut);
     }
 
@@ -60,7 +58,7 @@ context('Delete unlock/lock object', () => {
     }
 
     function actionOnConfirmWindow(textBuntton) {
-        cy.get('.cvat-modal-confirm').within(() => {
+        cy.get('.cvat-modal-confirm-remove-object').within(() => {
             cy.contains(new RegExp(`^${textBuntton}$`, 'g')).click();
         });
     }
@@ -71,11 +69,12 @@ context('Delete unlock/lock object', () => {
     }
 
     function checkFailDeleteLockObject(shortcut) {
-        deleteObjectViaShortcut(shortcut, 'lock');
+        deleteObjectViaShortcut(shortcut);
         checkExistObject('exist');
-        cy.get('.cvat-modal-confirm').should('exist');
-        cy.get('.cvat-modal-confirm').within(() => {
+        cy.get('.cvat-modal-confirm-remove-object').should('exist');
+        cy.get('.cvat-modal-confirm-remove-object').within(() => {
             cy.contains('Cancel').click();
+            cy.get('.cvat-modal-confirm-remove-object').should('not.exist');
         });
     }
 
@@ -86,7 +85,7 @@ context('Delete unlock/lock object', () => {
     describe(`Testing case "${caseId}"`, () => {
         it('Create and delete object via "Delete" shortcut', () => {
             cy.createRectangle(createRectangleShape2Points);
-            deleteObjectViaShortcut('{del}', 'unlock');
+            deleteObjectViaShortcut('{del}');
             checkExistObject('not.exist');
         });
 
@@ -100,7 +99,7 @@ context('Delete unlock/lock object', () => {
             cy.createRectangle(createRectangleShape2Points);
             lockObject();
             checkFailDeleteLockObject('{del}');
-            deleteObjectViaShortcut('{shift}{del}', 'lock');
+            deleteObjectViaShortcut('{shift}{del}');
             checkExistObject('not.exist');
         });