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 1 commit
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

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions 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 @@ -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: {},
Expand Down Expand Up @@ -46,7 +48,6 @@ define([
*/
initialize: function () {
this._super();
$(document).on('keydown', this.handleKeyDown.bind(this));

return this;
},
Expand Down Expand Up @@ -130,6 +131,11 @@ define([
show: function (record) {
var img;

if (!this.isListenerActive) {
Copy link
Member

Choose a reason for hiding this comment

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

I believe we can check for visibleRecord in handleKeyDown without introducing the new field and show method logic complication

$(this.masonrySelector).on('keydown', this.handleKeyDown.bind(this));
this.isListenerActive = true;
}

if (record._rowIndex === this.visibleRecord()) {
this.hide();

Expand Down Expand Up @@ -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') {
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