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');
  });