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

drpayyne · 2019-12-11T12:43:13Z

Description

Added a more specific selector for keyboard navigation listener

Fixed Issues

The Preview images are changed if move the cursor with arrow keys in File Name field adobe-stock-integration#847: The Preview images are changed if move the cursor with arrow keys in File Name field

Manual testing scenarios

Open Adobe Stock Panel
Verify ability to navigate opened preview images using keyboard
Click Save Preview for an image for filename prompt to open
Verify ability to navigate between characters inside input field when prompt is open

Contribution checklist

Pull request has a meaningful description of its purpose
All commits are accompanied by meaningful commit messages
All new or changed code is covered with unit/integration tests (if applicable)
All automated tests passed successfully (all builds are green)

m2-assistant · 2019-12-11T12:43:16Z

Hi @drpayyne. Thank you for your contribution
Here is some useful tips how you can test your changes using Magento test environment.
Add the comment under your pull request to deploy test or vanilla Magento instance:

@magento give me test instance - deploy test instance based on PR changes
@magento give me 2.4-develop instance - deploy vanilla Magento instance

For more details, please, review the Magento Contributor Guide documentation.

sivaschenko

Thanks for the PR @drpayyne , please take a look at the comment below.

It will be great if you could also add a test coverage for this case as part of the PR: either MFTF or js

sivaschenko · 2019-12-11T16:45:30Z

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

@@ -46,7 +46,7 @@ define([
         */
        initialize: function () {
            this._super();
-            $(document).on('keydown', this.handleKeyDown.bind(this));
+            $('.modal-slide.adobe-stock-modal').on('keydown', this.handleKeyDown.bind(this));


Can you please move this selector to defaults

Done, thanks! I also added a check to see if an input element is active to prevent image navigation when the search textbox is active. This also works for the image quantity for the page, but for some reason, not for the page number counter itself... Any thoughts?

Related: magento/adobe-stock-integration#846

sivaschenko

Thanks for update @drpayyne ! Please see my comment

sivaschenko · 2019-12-12T11:10:46Z

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

@@ -13,6 +13,7 @@ define([
        defaults: {
            bodyTmpl: 'ui/grid/columns/image-preview',
            previewImageSelector: '[data-image-preview]',
+            adobeStockModalSelector: '.modal-slide.adobe-stock-modal',


can the selector (and property) be modified not to mention adobe stock (as that is not currently adobe stock scope)?

Fixed this too, thanks!

drpayyne · 2019-12-19T19:36:31Z

@sivaschenko, ICYMI.

sivaschenko

Thanks for the pull request @drpayyne ! Please see my comment

sivaschenko · 2019-12-20T12:15:44Z

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

@@ -130,6 +131,11 @@ define([
        show: function (record) {
            var img;

+            if (!this.isListenerActive) {


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

m2-assistant · 2020-01-17T18:25:37Z

Hi @drpayyne, thank you for your contribution!
Please, complete Contribution Survey, it will take less than a minute.
Your feedback will help us to improve contribution process.

sivaschenko · 2020-01-17T18:28:14Z

Sorry, closed the wrong pull request by mistake

engcom-Bravo · 2020-01-28T11:41:34Z

✔️ QA Passed

Rechecked on Save Preview window

and on License Images... window

The cursor is moved but the Preview images - not
The arrow keys switch the preview images properly when no Confirm window is opened

engcom-Golf · 2020-01-28T11:54:01Z

I will take care of test coverage.

engcom-Golf · 2020-01-30T12:30:14Z

Hi @sivaschenko could you please review test coverage ?

sivaschenko

Thanks for test coverage @Nazar65 ! Please see my review comments

sivaschenko · 2020-02-07T15:16:30Z

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

+            it('veify record changed on key down', function () {
+                var recordMock = {
+                    _rowIndex: 2
+                },


@Nazar65 @engcom-Golf the formatting is not consistent, lines 53-54 require additional indentation

sivaschenko · 2020-02-07T15:18:17Z

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

@@ -46,5 +46,39 @@ define([
            });

        });
+
+        describe('handleKeyDown method', function () {


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

magento-engcom-team · 2020-02-12T15:23:45Z

Hi @sivaschenko, thank you for the review.
ENGCOM-6692 has been created to process this Pull Request

…red by moving the input filed cursor using arrow keys #25991

m2-assistant · 2020-02-13T08:47:16Z

Hi @drpayyne, thank you for your contribution!
Please, complete Contribution Survey, it will take less than a minute.
Your feedback will help us to improve contribution process.

drpayyne requested a review from DrewML as a code owner December 11, 2019 12:43

magento-engcom-team added Partner: EY partners-contribution Pull Request is created by Magento Partner labels Dec 11, 2019

drpayyne mentioned this pull request Dec 11, 2019

The Preview images are changed if move the cursor with arrow keys in File Name field magento/adobe-stock-integration#847

Closed

drpayyne requested a review from sivaschenko December 11, 2019 12:45

sivaschenko added the Award: bug fix label Dec 11, 2019

sivaschenko requested changes Dec 11, 2019

View reviewed changes

ghost assigned sivaschenko Dec 11, 2019

ghost added the Progress: needs update label Dec 11, 2019

drpayyne force-pushed the bugfix/adobe-stock-847 branch from 54982c2 to 2c3d5dd Compare December 11, 2019 18:28

sivaschenko requested changes Dec 12, 2019

View reviewed changes

sivaschenko changed the title ~~Fixed Adobe Stock Integration #847~~ Fixed issue when the preview images navigation is triggered by moving the input filed cursor using arrow keys Dec 12, 2019

rogyar mentioned this pull request Dec 13, 2019

Fixed keyboard arrow keys behavior for number fields in AdobeStock grid #26029

Merged

Added more specific element for keyboard navigation listener

9f1be1d

drpayyne force-pushed the bugfix/adobe-stock-847 branch from 2c3d5dd to 9f1be1d Compare December 14, 2019 09:12

drpayyne requested a review from melnikovi as a code owner December 14, 2019 09:12

drpayyne requested a review from sivaschenko December 14, 2019 09:13

sivaschenko requested changes Dec 20, 2019

View reviewed changes

sivaschenko closed this Jan 17, 2020

sivaschenko reopened this Jan 17, 2020

ghost unassigned sivaschenko Jan 17, 2020

sivaschenko added 2 commits January 27, 2020 15:16

Merge branch '2.4-develop' into bugfix/adobe-stock-847

8c4b6d6

magento#25991: Reverted unnecessary changes

6aeb865

sivaschenko added the Auto-Tests: Not Covered Changes in Pull Request requires coverage by auto-tests label Jan 27, 2020

sivaschenko approved these changes Jan 27, 2020

View reviewed changes

ghost assigned sivaschenko Jan 27, 2020

ghost added Progress: testing in progress Progress: extended testing and removed Progress: ready for testing Progress: testing in progress labels Jan 28, 2020

engcom-Golf self-assigned this Jan 28, 2020

engcom-Golf added Auto-Tests: Covered All changes in Pull Request is covered by auto-tests and removed Auto-Tests: Not Covered Changes in Pull Request requires coverage by auto-tests labels Jan 30, 2020

Nazar65 added 2 commits January 30, 2020 12:01

Cover cjanges with jasmine test

56daae0

Destroy spy after test

edc16d5

ghost added Progress: needs update and removed Progress: extended testing labels Feb 3, 2020

sivaschenko requested changes Feb 7, 2020

View reviewed changes

Nazar65 added 2 commits February 12, 2020 16:51

add case when active element is input

5cc2dc7

fix typo

7a88ffc

sivaschenko approved these changes Feb 12, 2020

View reviewed changes

ghost added Progress: ready for testing Progress: accept and removed Progress: needs update Progress: ready for testing labels Feb 12, 2020

magento-engcom-team mentioned this pull request Feb 13, 2020

Use cursor: pointer for the product online switcher #847

Closed

magento-engcom-team pushed a commit that referenced this pull request Feb 13, 2020

ENGCOM-6692: Fixed issue when the preview images navigation is trigge…

d328952

…red by moving the input filed cursor using arrow keys #25991

magento-engcom-team merged commit 7a88ffc into magento:2.4-develop Feb 13, 2020

drpayyne mentioned this pull request Feb 25, 2020

Possible to switch to a whole div using TAB key magento/adobe-stock-integration#973

Closed

drpayyne mentioned this pull request Mar 3, 2020

Removed unnecessary tabindex property #27138

Merged

4 tasks

sdzhepa mentioned this pull request May 9, 2022

tyutyu sdzhepa/magento2#5

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

drpayyne commented Dec 11, 2019 •

edited

Loading

m2-assistant bot commented Dec 11, 2019

sivaschenko left a comment

sivaschenko Dec 11, 2019

drpayyne Dec 11, 2019 •

edited

Loading

sivaschenko left a comment

sivaschenko Dec 12, 2019

drpayyne Dec 14, 2019

drpayyne commented Dec 19, 2019

sivaschenko left a comment

sivaschenko Dec 20, 2019

m2-assistant bot commented Jan 17, 2020

sivaschenko commented Jan 17, 2020

engcom-Bravo commented Jan 28, 2020

engcom-Golf commented Jan 28, 2020

engcom-Golf commented Jan 30, 2020

sivaschenko left a comment

sivaschenko Feb 7, 2020

engcom-Golf Feb 10, 2020

sivaschenko Feb 7, 2020

engcom-Golf Feb 10, 2020

magento-engcom-team commented Feb 12, 2020

m2-assistant bot commented Feb 13, 2020

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

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

Conversation

drpayyne commented Dec 11, 2019 • edited Loading

Description

Fixed Issues

Manual testing scenarios

Contribution checklist

m2-assistant bot commented Dec 11, 2019

sivaschenko left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

drpayyne Dec 11, 2019 • edited Loading

Choose a reason for hiding this comment

sivaschenko left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

drpayyne commented Dec 19, 2019

sivaschenko left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

m2-assistant bot commented Jan 17, 2020

sivaschenko commented Jan 17, 2020

engcom-Bravo commented Jan 28, 2020

engcom-Golf commented Jan 28, 2020

engcom-Golf commented Jan 30, 2020

sivaschenko left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

magento-engcom-team commented Feb 12, 2020

m2-assistant bot commented Feb 13, 2020

drpayyne commented Dec 11, 2019 •

edited

Loading

drpayyne Dec 11, 2019 •

edited

Loading