Fixes #4030 - Switching the photos displayed in the preview does not work with the arrow keys.

app/assets/javascripts/app/controllers/ticket_zoom/article_image_view.coffee

@@ -14,19 +14,23 @@ class App.TicketZoomArticleImageView extends App.ControllerModal
   constructor: ->
     super
     @unbindAll()
-    $(document).on('keydown.image_preview', 'right', (e) =>
-      nextElement = @parentElement.closest('.attachment').next('.attachment.attachment--preview')
-      return if nextElement.length is 0
-      @close()
-      nextElement.find('img').trigger('click')
-    )
-    $(document).on('keydown.image_preview', 'left', (e) =>
-      prevElement = @parentElement.closest('.attachment').prev('.attachment.attachment--preview')
-      return if prevElement.length is 0
-      @close()
-      prevElement.find('img').trigger('click')
+    $(document).on('keydown.image_preview', (e) =>
+      return @nextRight() if e.keyCode is 39 # right
+      return @nextLeft() if e.keyCode is 37 # left
     )
 
+  nextRight: =>
+    nextElement = @parentElement.closest('.attachment').next('.attachment.attachment--preview')
+    return if nextElement.length is 0
+    @close()
+    nextElement.find('img').trigger('click')
+
+  nextLeft: =>
+    prevElement = @parentElement.closest('.attachment').prev('.attachment.attachment--preview')
+    return if prevElement.length is 0
+    @close()
+    prevElement.find('img').trigger('click')
+
   content: ->
     @image = @image.replace(/view=preview/, 'view=inline')
     "<div class=\"centered imagePreview\">#{@image}</div>"

spec/system/ticket/zoom/article_image_view_spec.rb

@@ -0,0 +1,43 @@
+# Copyright (C) 2012-2022 Zammad Foundation, https://zammad-foundation.org/
+
+require 'rails_helper'
+
+RSpec.describe 'Article Image View', type: :system do
+  describe 'Switching the photos displayed in the preview does not work with the arrow keys #4030' do
+    let(:ticket) { create(:ticket, group: Group.first) }
+    let(:article) do
+      create(:ticket_article, ticket: ticket, attachments: [
+               {
+                 data:        File.read(Rails.root.join('spec/fixtures/files/image/squares.png')),
+                 filename:    'squares.png',
+                 preferences: { 'Content-Type' => 'image/png', 'resizable' => true, 'content_preview' => true },
+               },
+               {
+                 data:        File.read(Rails.root.join('spec/fixtures/files/image/squares2.png')),
+                 filename:    'squares2.png',
+                 preferences: { 'Content-Type' => 'image/png', 'resizable' => true, 'content_preview' => true },
+               },
+               {
+                 data:        File.read(Rails.root.join('spec/fixtures/files/image/squares3.png')),
+                 filename:    'squares3.png',
+                 preferences: { 'Content-Type' => 'image/png', 'resizable' => true, 'content_preview' => true },
+               },
+             ])
+    end
+
+    before do
+      visit "#ticket/zoom/#{article.ticket.id}"
+    end
+
+    it 'does switch images via arrow keys' do
+      first('.ticket-article-item .attachment-icon img').click
+      images = Store.last(3)
+      wait.until { page.find('div.imagePreview img')[:src].include?("/#{images[0].id}") }
+      find('body').send_keys :arrow_right
+      find('body').send_keys :arrow_right
+      wait.until { page.find('div.imagePreview img')[:src].include?("/#{images[2].id}") }
+      find('body').send_keys :arrow_left
+      wait.until { page.find('div.imagePreview img')[:src].include?("/#{images[1].id}") }
+    end
+  end
+end