ENGCOM-6692: Fixed issue when the preview images navigation is triggered by moving the input filed cursor using arrow keys #25991

Author: slavvka

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

@@ -239,7 +239,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>

dev/tests/js/jasmine/tests/app/code/Magento/Ui/base/js/grid/columns/image-preview.test.js

@@ -13,10 +13,26 @@ define([
 
     describe('Ui/js/grid/columns/image-preview', function () {
         var record = {
-            _rowIndex: 1,
-            rowNumber: 1
-        },
-           imagePreview;
+                _rowIndex: 1,
+                rowNumber: 1
+            },
+            imagePreview,
+            recordMock = {
+                _rowIndex: 2
+            },
+            secondRecordMock = {
+                _rowIndex: 1,
+                rowNumber: 1
+            },
+            elementMock = {
+                keyCode: 37
+            },
+            masonryMock = {
+                shows: jasmine.createSpy().and.returnValue([]),
+                rows: jasmine.createSpy().and.returnValue({
+                    1: secondRecordMock
+                })
+            };
 
         beforeEach(function () {
             imagePreview = new Preview();
@@ -46,5 +62,36 @@ define([
             });
 
         });
+
+        describe('handleKeyDown method', function () {
+
+            it('verify record changed on key down', function () {
+                var imageMock = document.createElement('img'),
+                    originMock = $.fn.get;
+
+                spyOn($.fn, 'get').and.returnValue(imageMock);
+                imagePreview.visibleRecord = jasmine.createSpy().and.returnValue(2);
+                imagePreview.displayedRecord = ko.observable();
+                imagePreview.displayedRecord(recordMock);
+                imagePreview.masonry = jasmine.createSpy().and.returnValue(masonryMock);
+                imagePreview.handleKeyDown(elementMock);
+                expect(imagePreview.displayedRecord()._rowIndex).toBe(secondRecordMock._rowIndex);
+
+                $.fn.get = originMock;
+            });
+
+            it('verify record not changed on key down when active element input', function () {
+                var input = $('<input id=\'input-fixture\'/>');
+
+                $(document.body).append(input);
+                input.focus();
+                imagePreview.visibleRecord = jasmine.createSpy().and.returnValue(1);
+                imagePreview.displayedRecord = ko.observable(1);
+                imagePreview.handleKeyDown(elementMock);
+                expect(imagePreview.displayedRecord()).toBe(1);
+
+                $('#input-fixture').remove();
+            });
+        });
     });
 });