diff --git a/package-lock.json b/package-lock.json
index 939e847a..481d6083 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
 			"license": "AGPL-3.0",
 			"dependencies": {
 				"@nextcloud/axios": "^2.0.0",
+				"@nextcloud/event-bus": "^3.0.2",
 				"@nextcloud/initial-state": "^2.0.0",
 				"@nextcloud/router": "^2.0.0",
 				"@nextcloud/vue": "^7.5.0",
@@ -2104,9 +2105,9 @@
 			}
 		},
 		"node_modules/@nextcloud/event-bus": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/@nextcloud/event-bus/-/event-bus-3.0.0.tgz",
-			"integrity": "sha512-wtlVyE5CY8fnzrBws1j5zWAYiiGLylVghDkj4bGPa5NUdUXtD7QrRBb20GEW8sIn1s/TwaS7+DHGvRUUCjIJeg==",
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/@nextcloud/event-bus/-/event-bus-3.0.2.tgz",
+			"integrity": "sha512-svXCZa4UkoZKsBiGzTi0cVcbPFUOhCm7pMKjGumRwBvHywX+8by478IQ8Grw75PFHxajMJZ0KrOTTM8WnzzEAw==",
 			"dependencies": {
 				"semver": "^7.3.7"
 			},
@@ -13442,9 +13443,9 @@
 			}
 		},
 		"@nextcloud/event-bus": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/@nextcloud/event-bus/-/event-bus-3.0.0.tgz",
-			"integrity": "sha512-wtlVyE5CY8fnzrBws1j5zWAYiiGLylVghDkj4bGPa5NUdUXtD7QrRBb20GEW8sIn1s/TwaS7+DHGvRUUCjIJeg==",
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/@nextcloud/event-bus/-/event-bus-3.0.2.tgz",
+			"integrity": "sha512-svXCZa4UkoZKsBiGzTi0cVcbPFUOhCm7pMKjGumRwBvHywX+8by478IQ8Grw75PFHxajMJZ0KrOTTM8WnzzEAw==",
 			"requires": {
 				"semver": "^7.3.7"
 			},
diff --git a/package.json b/package.json
index c105e117..3db3312b 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
 	],
 	"dependencies": {
 		"@nextcloud/axios": "^2.0.0",
+		"@nextcloud/event-bus": "^3.0.2",
 		"@nextcloud/initial-state": "^2.0.0",
 		"@nextcloud/router": "^2.0.0",
 		"@nextcloud/vue": "^7.5.0",
diff --git a/src/referencePicker/ReferencePicker.vue b/src/referencePicker/ReferencePicker.vue
index a896f0e8..776c0418 100644
--- a/src/referencePicker/ReferencePicker.vue
+++ b/src/referencePicker/ReferencePicker.vue
@@ -1,5 +1,8 @@
 <template>
-	<div class="reference-picker" :style="pickerWrapperStyle">
+	<div class="reference-picker"
+		:style="pickerWrapperStyle"
+		tabindex="-1"
+		@keydown.stop.prevent.esc="onEscapePressed">
 		<ProviderList v-if="mode === MODES.providerList"
 			ref="provider-list"
 			@select-provider="onProviderSelected"
@@ -108,17 +111,10 @@ export default {
 			}
 		}
 
-		document.addEventListener('keyup', this.onKeypress)
 	},
 	beforeDestroy() {
-		document.removeEventListener('keyup', this.onKeypress)
 	},
 	methods: {
-		onKeypress(e) {
-			if (e.key === 'Escape') {
-				this.onEscapePressed()
-			}
-		},
 		onEscapePressed() {
 			if (this.selectedProvider !== null) {
 				this.deselectProvider()
@@ -157,9 +153,9 @@ export default {
 		deselectProvider() {
 			this.selectedProvider = null
 			this.$emit('provider-selected', null)
-			this.$nextTick(() => {
+			setTimeout(() => {
 				this.$refs['provider-list']?.focus()
-			})
+			}, 300)
 		},
 	},
 }
diff --git a/src/referencePicker/ReferencePickerModal.vue b/src/referencePicker/ReferencePickerModal.vue
index 71e91aed..c3a0d871 100644
--- a/src/referencePicker/ReferencePickerModal.vue
+++ b/src/referencePicker/ReferencePickerModal.vue
@@ -4,7 +4,8 @@
 		:can-close="false"
 		class="reference-picker-modal"
 		@close="onCancel">
-		<div class="reference-picker-modal--content">
+		<div ref="modal_content"
+			class="reference-picker-modal--content">
 			<NcButton v-if="showBackButton"
 				:aria-label="backButtonTitle"
 				:title="backButtonTitle"
@@ -42,6 +43,7 @@ import ArrowLeftIcon from 'vue-material-design-icons/ArrowLeft.vue'
 import CloseIcon from 'vue-material-design-icons/Close.vue'
 
 import { NcModal, NcButton } from '@nextcloud/vue'
+import { emit } from '@nextcloud/event-bus'
 
 import ReferencePicker from './ReferencePicker.vue'
 import { isCustomPickerElementRegistered } from './customPickerElements.js'
@@ -70,6 +72,13 @@ export default {
 			type: Boolean,
 			default: true,
 		},
+		/**
+		 * If true, add the modal content to the Viewer trap elements via the event-bus
+		 */
+		isInsideViewer: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		return {
@@ -78,7 +87,6 @@ export default {
 			backButtonTitle: 'Back to provider selection',
 			closeButtonTitle: 'Close',
 			closeButtonLabel: 'Close link picker',
-
 		}
 	},
 	computed: {
@@ -102,6 +110,12 @@ export default {
 				: 'Link picker'
 		},
 	},
+	mounted() {
+		if (this.isInsideViewer) {
+			const elem = this.$refs.modal_content
+			emit('viewer:trapElements:changed', elem)
+		}
+	},
 	methods: {
 		onCancel() {
 			this.show = false
diff --git a/src/referencePicker/referencePickerModal.js b/src/referencePicker/referencePickerModal.js
index 366b76c3..fa841299 100644
--- a/src/referencePicker/referencePickerModal.js
+++ b/src/referencePicker/referencePickerModal.js
@@ -6,9 +6,10 @@ import { getProvider } from './providerHelper.js'
  * Creates a reference picker modal and return a promise which provides the result
  *
  * @param {String} providerId Optional ID of initial selected provider
+ * @param {Boolean} isInsideViewer Should be true if this function is called while the Viewer is displayed
  * @returns {Promise<unknown>}
  */
-export async function getLinkWithPicker(providerId = null) {
+export async function getLinkWithPicker(providerId = null, isInsideViewer = undefined) {
 	return await new Promise((resolve, reject) => {
 		const modalId = 'referencePickerModal'
 		const modalElement = document.createElement('div')
@@ -23,6 +24,7 @@ export async function getLinkWithPicker(providerId = null) {
 		const view = new View({
 			propsData: {
 				initialProvider,
+				isInsideViewer,
 			},
 		}).$mount(modalElement)