Merge pull request #1597 from yolouiese/1589-hitting-enter-on-edit-im…

…age-redirects-to-dashboard #1589: Hitting Enter key on Edit Image page redirects the user to Magento Dashboard instead of Saving the image
magento · Jul 17, 2020 · 094e513 · 094e513
2 parents 30384b2 + 88a31c9
commit 094e513
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 3 deletions.
diff --git a/MediaGalleryUi/view/adminhtml/web/js/image/image-edit.js b/MediaGalleryUi/view/adminhtml/web/js/image/image-edit.js
@@ -7,8 +7,9 @@ define([
     'jquery',
     'underscore',
     'uiComponent',
+    'Magento_Ui/js/lib/key-codes',
     'Magento_MediaGalleryUi/js/action/getDetails'
-], function ($, _, Component, getDetails) {
+], function ($, _, Component, keyCodes, getDetails) {
     'use strict';
 
     return Component.extend({
@@ -100,6 +101,25 @@ define([
         addMediaGridMessage: function (code, message) {
             this.mediaGridMessages().add(code, message);
             this.mediaGridMessages().scheduleCleanup();
+        },
+
+        /**
+         * Handle Enter key event to save image details
+         *
+         * @param {Object} data
+         * @param {jQuery.Event} event
+         * @returns {Boolean}
+         */
+        handleEnterKey: function (data, event) {
+            var modalElement = $(this.modalSelector),
+                key = keyCodes[event.keyCode];
+
+            if (key === 'enterKey') {
+                event.preventDefault();
+                modalElement.find('.page-action-buttons button.save').click();
+            }
+
+            return true;
         }
     });
 });
diff --git a/MediaGalleryUi/view/adminhtml/web/template/image/image-edit.html b/MediaGalleryUi/view/adminhtml/web/template/image/image-edit.html
@@ -14,7 +14,8 @@
                 </label>
                 <div class="admin__field-control">
                     <input type="text" id="title" data-ui-id="title" name="title" placeholder="Title"
-                           class="admin__control-text required-entry minimum-length-1 maximum-length-120" data-bind="value: image().title"
+                           class="admin__control-text required-entry minimum-length-1 maximum-length-120"
+                           data-bind="value: image().title, event: {keypress: handleEnterKey}"
                            data-validate="{'required':true,'validate-alphanum-with-spaces':true, 'validate-length':true}"/>
                 </div>
             </div>
@@ -36,7 +37,7 @@
                               name="description"
                               class="admin__control-textarea minimum-length-0 maximum-length-500"
                               rows="7" cols="80"
-                              data-bind="value: image().description"
+                              data-bind="value: image().description, event: {keypress: handleEnterKey}"
                               data-validate="{'validate-alphanum-with-spaces':true, 'validate-length':true}"></textarea>
                 </div>
             </div>