Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Feb 13, 2020
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9f1be1d
Added more specific element for keyboard navigation listener
drpayyne Dec 11, 2019
8c4b6d6
Merge branch '2.4-develop' into bugfix/adobe-stock-847
sivaschenko Jan 27, 2020
6aeb865
magento/magento2#25991: Reverted unnecessary changes
sivaschenko Jan 27, 2020
56daae0
Cover cjanges with jasmine test
Nazar65 Jan 30, 2020
edc16d5
Destroy spy after test
Nazar65 Jan 30, 2020
5cc2dc7
add case when active element is input
Nazar65 Feb 12, 2020
7a88ffc
fix typo
Nazar65 Feb 12, 2020
File filter

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/code/Magento/Ui/view/base/web/js/grid/columns/image-preview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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') {
Expand Down
2 changes: 1 addition & 1 deletion app/code/Magento/Ui/view/base/web/templates/grid/masonry.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
55 changes: 51 additions & 4 deletions dev/tests/js/jasmine/tests/app/code/Magento/Ui/base/js/grid/columns/image-preview.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -46,5 +62,36 @@ define([
});

});

describe('handleKeyDown method', function () {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be good also to test the case when the active element is input
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok

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();
});
});
});
});