Merge pull request #7971 from nextcloud-libraries/backport/7966/stable8

Author: skjnldsv

src/composables/useHotKey/index.ts

@@ -58,8 +58,11 @@ function shouldIgnoreEvent(event: KeyboardEvent): boolean {
 		|| event.target.isContentEditable) {
 		return true
 	}
-	/** Abort if any modal/dialog opened */
-	return document.getElementsByClassName('modal-mask').length !== 0
+
+	/** Abort if any modal/dialog is opened AND visible */
+	return Array.from(document.getElementsByClassName('modal-mask'))
+		.filter((el) => el.checkVisibility())
+		.length > 0
 }
 
 type KeyboardEventHandler = (event: KeyboardEvent) => void

tests/unit/composables/useHotKey.spec.js

@@ -19,6 +19,7 @@ describe('useHotKey', () => {
 
 	afterEach(() => {
 		mockCallback.mockReset()
+		document.body.innerHTML = ''
 	})
 
 	it('should register listener and invoke callback', () => {
@@ -39,6 +40,33 @@ describe('useHotKey', () => {
 		expect(mockCallback).not.toHaveBeenCalled()
 	})
 
+	it('should not invoke callback by default, when a modal is shown', () => {
+		const modal = document.createElement('div')
+		modal.className = 'modal-mask'
+		document.body.appendChild(modal)
+		modal.checkVisibility = () => true
+
+		const stop = useHotKey(true, mockCallback)
+		triggerKeyDown({ key: 'a', code: 'KeyA' })
+		stop()
+
+		expect(mockCallback).not.toHaveBeenCalled()
+	})
+
+	it('should invoke callback by default, when a modal present but hidden', () => {
+		const modal = document.createElement('div')
+		modal.className = 'modal-mask'
+		modal.style.display = 'none'
+		document.body.appendChild(modal)
+		modal.checkVisibility = () => false
+
+		const stop = useHotKey(true, mockCallback)
+		triggerKeyDown({ key: 'a', code: 'KeyA' })
+		stop()
+
+		expect(mockCallback).toHaveBeenCalled()
+	})
+
 	describe('options', () => {
 		it('should accept array of keys and invoke callback for all of them', () => {
 			const stop = useHotKey(['a', 'b'], mockCallback)