From d199806969be99f968cc9b3a74cc233e86e0cc12 Mon Sep 17 00:00:00 2001
From: ThibG <thib@sitedethib.com>
Date: Thu, 26 Jul 2018 04:50:50 +0200
Subject: [PATCH] Prevent scrolling main frame when navigating in image gallery
 with arrow keys (#8073)

---
 .../mastodon/features/ui/components/media_modal.js     | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/app/javascript/mastodon/features/ui/components/media_modal.js b/app/javascript/mastodon/features/ui/components/media_modal.js
index 6af0a101c9f..12db9532626 100644
--- a/app/javascript/mastodon/features/ui/components/media_modal.js
+++ b/app/javascript/mastodon/features/ui/components/media_modal.js
@@ -54,19 +54,23 @@ export default class MediaModal extends ImmutablePureComponent {
     this.setState({ index: index % this.props.media.size });
   }
 
-  handleKeyUp = (e) => {
+  handleKeyDown = (e) => {
     switch(e.key) {
     case 'ArrowLeft':
       this.handlePrevClick();
+      e.preventDefault();
+      e.stopPropagation();
       break;
     case 'ArrowRight':
       this.handleNextClick();
+      e.preventDefault();
+      e.stopPropagation();
       break;
     }
   }
 
   componentDidMount () {
-    window.addEventListener('keyup', this.handleKeyUp, false);
+    window.addEventListener('keydown', this.handleKeyDown, false);
     if (this.context.router) {
       const history = this.context.router.history;
       history.push(history.location.pathname, previewState);
@@ -77,7 +81,7 @@ export default class MediaModal extends ImmutablePureComponent {
   }
 
   componentWillUnmount () {
-    window.removeEventListener('keyup', this.handleKeyUp);
+    window.removeEventListener('keydown', this.handleKeyDown);
     if (this.context.router) {
       this.unlistenHistory();