viewer: fix keydown event handling (#1115)

Signed-off-by: Varun Patil <radialapps@gmail.com>
pulsejet · Apr 4, 2024 · fcc2f0a · fcc2f0a
1 parent b7eca5e
commit fcc2f0a
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
@@ -143,7 +143,16 @@ export default defineComponent({
       // Stop sidebar typing from leaking outside
       const sidebar = document.getElementById('app-sidebar-vue');
       sidebar?.addEventListener('keydown', (e) => {
-        if (e.key.length === 1) e.stopPropagation();
+        if (e.key === 'Enter' || e.key === 'Tab') {
+          e.stopPropagation();
+          return;
+        }
+
+        const element = e.target as HTMLElement;
+        if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA' || element.isContentEditable) {
+          e.stopPropagation();
+          return;
+        }
       });
 
       // Emit event

diff --git a/src/components/viewer/Viewer.vue b/src/components/viewer/Viewer.vue
@@ -6,7 +6,6 @@
     :class="{ fullyOpened, slideshowTimer }"
     :style="{ width: outerWidth }"
     @fullscreenchange="fullscreenChange"
-    @keydown="keydown"
   >
     <ImageEditor v-if="editorOpen && currentPhoto" :photo="currentPhoto" @close="editorOpen = false" />
 
@@ -557,6 +556,11 @@ export default defineComponent({
         }
       });
 
+      // Handle keydown
+      this.photoswipe.on('keydown', (e) => {
+        this.keydown(e.originalEvent);
+      });
+
       // Make sure buttons are styled properly
       this.photoswipe.addFilter('uiElement', (element, data) => {
         // add button-vue class if button
@@ -1008,6 +1012,8 @@ export default defineComponent({
 
     /** Key press events */
     keydown(e: KeyboardEvent) {
+      if (e.defaultPrevented) return;
+
       if (e.key === 'Delete') {
         this.deleteCurrent();
       }