diff --git a/packages/portal/src/components/media/MediaImageViewer.vue b/packages/portal/src/components/media/MediaImageViewer.vue
index dff9becee3..711c5e310b 100644
--- a/packages/portal/src/components/media/MediaImageViewer.vue
+++ b/packages/portal/src/components/media/MediaImageViewer.vue
@@ -2,10 +2,10 @@
   <div
     id="media-image-viewer"
     class="h-100 w-100"
+    v-on="fullImageRendered ? {} : { keydown: handleKeyboardToggleKeydown }"
   >
     <MediaImageViewerKeyboardToggle
       id="media-image-viewer-keyboard-toggle"
-      @renderFullImage="renderFullImage"
     />
     <slot />
   </div>
@@ -145,6 +145,12 @@
     },
 
     methods: {
+      handleKeyboardToggleKeydown(event) {
+        if (['ArrowUp', 'ArrowRight', 'ArrowDown', 'ArrowLeft', '-', '+'].includes(event.key)) {
+          this.fullImageRendered || this.renderFullImage();
+        }
+      },
+
       initOlAnnotationLayer() {
         const layerCount = this.olMap.getLayers().getLength();
         if (layerCount === 0) {
@@ -302,8 +308,6 @@
         const url = this.$apis.record.mediaProxyUrl(this.url, this.itemId, { disposition: 'inline' });
         const mapOptions = await this.initOlImageLayerStatic(url, this.width, this.height);
         this.initMapWithFullImage(mapOptions);
-
-        this.fullImageRendered = true;
       },
 
       // IIIF Image API
@@ -348,7 +352,6 @@
         if (this.source === 'IIIF') {
           const mapOptions = this.initOlImageLayerIIIF();
           this.initMapWithFullImage(mapOptions);
-          this.fullImageRendered = true;
         } else if (this.annotation) {
           this.renderFullImage();
         } else {
@@ -358,6 +361,7 @@
 
       initMapWithFullImage(mapOptions) {
         this.initOlMap(mapOptions);
+        this.fullImageRendered = true;
         this.highlightAnnotation();
       },
 
diff --git a/packages/portal/src/components/media/MediaImageViewerKeyboardToggle.vue b/packages/portal/src/components/media/MediaImageViewerKeyboardToggle.vue
index f12ee7eb9f..92b53bd7bc 100644
--- a/packages/portal/src/components/media/MediaImageViewerKeyboardToggle.vue
+++ b/packages/portal/src/components/media/MediaImageViewerKeyboardToggle.vue
@@ -46,13 +46,6 @@
       },
       showToast() {
         this.$bvToast.show('media-image-viewer-toast');
-        this.$refs.keyboardtoggle.addEventListener('keydown', this.renderFullMediaOnKeyboardInteraction);
-      },
-      renderFullMediaOnKeyboardInteraction(event) {
-        if (['ArrowUp', 'ArrowRight', 'ArrowDown', 'ArrowLeft', '-', '+'].includes(event.key)) {
-          this.$emit('renderFullImage');
-          this.$refs.keyboardtoggle.removeEventListener('keydown', this.renderFullMediaOnKeyboardInteraction);
-        }
       }
     }
   };
diff --git a/packages/portal/tests/unit/components/media/MediaImageViewer.spec.js b/packages/portal/tests/unit/components/media/MediaImageViewer.spec.js
index bbac9392b9..f485016822 100644
--- a/packages/portal/tests/unit/components/media/MediaImageViewer.spec.js
+++ b/packages/portal/tests/unit/components/media/MediaImageViewer.spec.js
@@ -59,6 +59,19 @@ describe('components/media/MediaImageViewer', () => {
         expect(wrapper.vm.initOlImageLayerStatic.calledWith(thumbnail, 400, 1600)).toBe(true);
       });
 
+      describe('and keydown on a key that triggers a zoom or pan', () => {
+        it('renders the full image', async() => {
+          const wrapper = factory({ propsData: { url, thumbnail, width, height } });
+          expect(wrapper.vm.fullImageRendered).toBe(false);
+          const viewerWrapper = wrapper.find('#media-image-viewer');
+
+          viewerWrapper.element.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }));
+          await wrapper.vm.$nextTick();
+
+          expect(wrapper.vm.fullImageRendered).toBe(true);
+        });
+      });
+
       describe('when there is no thumbnail', () => {
         it('renders the full image', async() => {
           const wrapper = factory({ propsData: { url, width, height } });
diff --git a/packages/portal/tests/unit/components/media/MediaImageViewerKeyboardToggle.spec.js b/packages/portal/tests/unit/components/media/MediaImageViewerKeyboardToggle.spec.js
index b16e0ce74a..d8e11e24e0 100644
--- a/packages/portal/tests/unit/components/media/MediaImageViewerKeyboardToggle.spec.js
+++ b/packages/portal/tests/unit/components/media/MediaImageViewerKeyboardToggle.spec.js
@@ -36,18 +36,6 @@ describe('components/media/MediaImageViewerKeyboardToggle', () => {
 
         expect(showToast.calledWith('media-image-viewer-toast')).toBe(true);
       });
-      describe('and keydown on a key that triggers a zoom or pan', () => {
-        it('emits to render full image media', () => {
-          const wrapper = factory();
-
-          const keyboardToggleButton = wrapper.find('[data-qa="media image viewer keyboard toggle button"]');
-
-          keyboardToggleButton.element.dispatchEvent(new Event('focus'));
-          wrapper.vm.$refs.keyboardtoggle.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }));
-
-          expect(wrapper.emitted('renderFullImage').length).toBe(1);
-        });
-      });
     });
   });
 
@@ -64,4 +52,3 @@ describe('components/media/MediaImageViewerKeyboardToggle', () => {
     });
   });
 });
-