pseudo code for user's operation to explain this:

1. search & choose a image result.
   -> that maens the focus point is on .image-detail-open > .result
   => we can detect it when binding on .image-detail-open.

2. click the blank of preview window
   -> this will change the focus point to prewiew window (.detail)
   => this time, when i press the arrow button now, the handler binding on .image-detail-open won't be actived because it doesn't have the focus.

So that's the problem appeared.

binding on two div isn't a beautiful code, so i suggested bind on body and check whether a image preview is opened.

hey @bonswouar ! i've found a solution !

what you need to do is add tabindex=-1 to the .detail element and the handler will work!
like this:

don't know why, and the solution isn't beautiful, but it actually worked!

AFAIK this issue should be fixed in

• [feature] ArrowKeys to navigate between image results #2724 (comment)