Added more specific element for keyboard navigation listener

Author: drpayyne

app/code/Magento/Ui/view/base/web/js/grid/columns/image-preview.js

@@ -13,6 +13,8 @@ define([
         defaults: {
             bodyTmpl: 'ui/grid/columns/image-preview',
             previewImageSelector: '[data-image-preview]',
+            masonrySelector: '.masonry-image-grid',
+            isListenerActive: false,
             visibleRecord: null,
             height: 0,
             displayedRecord: {},
@@ -46,7 +48,6 @@ define([
          */
         initialize: function () {
             this._super();
-            $(document).on('keydown', this.handleKeyDown.bind(this));
 
             return this;
         },
@@ -130,6 +131,11 @@ define([
         show: function (record) {
             var img;
 
+            if (!this.isListenerActive) {
+                $(this.masonrySelector).on('keydown', this.handleKeyDown.bind(this));
+                this.isListenerActive = true;
+            }
+
             if (record._rowIndex === this.visibleRecord()) {
                 this.hide();
 
@@ -239,7 +245,7 @@ define([
         handleKeyDown: function (e) {
             var key = keyCodes[e.keyCode];
 
-            if (this.visibleRecord() !== null) {
+            if (this.visibleRecord() !== null && document.activeElement.tagName !== 'INPUT') {
                 if (key === 'pageLeftKey') {
                     this.prev(this.displayedRecord());
                 } else if (key === 'pageRightKey') {

app/code/Magento/Ui/view/base/web/templates/grid/masonry.html

@@ -4,7 +4,7 @@
  * See COPYING.txt for license details.
  */
 -->
-<div data-role="grid-wrapper" class="masonry-image-grid" attr="'data-id': containerId">
+<div data-role="grid-wrapper" class="masonry-image-grid" attr="'data-id': containerId" tabindex="0">
     <div class="masonry-image-column" repeat="foreach: rows, item: '$row'">
         <div outerfasteach="data: getVisible(), as: '$col'" template="getBody()"/>
     </div>