🐛 Fixed ctrl/cmd+s not saving focused fields on general/staff settings screens

no issue

- swapped from route actions triggered by shortcuts mixin to explicit `{{on-key}}` actions
- when saved via keyboard, blur any focused element to trigger it's on-blur action and schedule the save to run after those actions

ghost/admin/app/controllers/settings/general.js

@@ -9,6 +9,7 @@ import {
     IMAGE_MIME_TYPES
 } from 'ghost-admin/components/gh-image-uploader';
 import {TrackedObject} from 'tracked-built-ins';
+import {run} from '@ember/runloop';
 import {task} from 'ember-concurrency';
 import {tracked} from '@glimmer/tracking';
 
@@ -151,4 +152,19 @@ export default class GeneralController extends Controller {
             throw error;
         }
     }
+
+    @action
+    saveViaKeyboard(event) {
+        event.preventDefault();
+
+        // trigger any set-on-blur actions
+        const focusedElement = document.activeElement;
+        focusedElement?.blur();
+
+        // schedule save for when set-on-blur actions have finished
+        run.schedule('actions', this, function () {
+            focusedElement?.focus();
+            this.saveTask.perform();
+        });
+    }
 }

ghost/admin/app/controllers/settings/staff/user.js

@@ -299,6 +299,20 @@ export default Controller.extend({
         }
     }).group('saveHandlers'),
 
+    saveViaKeyboard: action(function (event) {
+        event.preventDefault();
+
+        // trigger any set-on-blur actions
+        const focusedElement = document.activeElement;
+        focusedElement?.blur();
+
+        // schedule save for when set-on-blur actions have finished
+        run.schedule('actions', this, function () {
+            focusedElement?.focus();
+            this.save.perform();
+        });
+    }),
+
     copyContentKey: task(function* () {
         copyTextToClipboard(this.personalToken);
         yield timeout(this.isTesting ? 50 : 3000);

ghost/admin/app/routes/settings/general.js

@@ -65,11 +65,6 @@ export default class GeneralSettingsRoute extends AdminRoute {
         return true;
     }
 
-    @action
-    save() {
-        return this.controller.send('save');
-    }
-
     @action
     reloadSettings() {
         return this.settings.reload();

ghost/admin/app/routes/settings/staff/user.js

@@ -88,11 +88,6 @@ export default class UserRoute extends AuthenticatedRoute {
         this.modelFor('settings.staff.user').get('errors').clear();
     }
 
-    @action
-    save() {
-        this.controller.save.perform();
-    }
-
     buildRouteInfoMetadata() {
         return {
             titleToken: 'Staff - User'

ghost/admin/app/templates/settings/general.hbs

@@ -1,4 +1,4 @@
-<section class="gh-canvas">
+<section class="gh-canvas" {{on-key "cmd+s" this.saveViaKeyboard}}>
     <GhCanvasHeader class="gh-canvas-header">
         <div class="flex flex-column">
             <div class="gh-canvas-breadcrumb">

ghost/admin/app/templates/settings/staff/user.hbs

@@ -1,4 +1,4 @@
-<section class="gh-canvas">
+<section class="gh-canvas" {{on-key "cmd+s" this.saveViaKeyboard}}>
     <GhCanvasHeader class="gh-canvas-header">
         {{!-- Remove breadcrumbs for Authors and Contributors --}}
         {{#if this.currentUser.isAuthorOrContributor}}

ghost/admin/tests/acceptance/settings/general-test.js

@@ -1,8 +1,8 @@
-import ctrlOrCmd from 'ghost-admin/utils/ctrl-or-cmd';
 import {authenticateSession, invalidateSession} from 'ember-simple-auth/test-support';
 import {beforeEach, describe, it} from 'mocha';
 import {blur, click, currentURL, fillIn, find, findAll, focus, triggerEvent} from '@ember/test-helpers';
 import {expect} from 'chai';
+import {keyDown} from 'ember-keyboard/test-support/test-helpers';
 import {setupApplicationTest} from 'ember-mocha';
 import {setupMirage} from 'ember-cli-mirage/test-support';
 import {visit} from '../../helpers/visit';
@@ -82,11 +82,7 @@ describe('Acceptance: Settings - General', function () {
             // CMD-S shortcut works
             // -------------------------------------------------------------- //
             await fillIn('[data-test-title-input]', 'CMD-S Test');
-            await triggerEvent('.gh-app', 'keydown', {
+            await keyDown('cmd+s');
-                keyCode: 83, // s
-                metaKey: ctrlOrCmd === 'command',
-                ctrlKey: ctrlOrCmd === 'ctrl'
-            });
             // we've already saved in this test so there's no on-screen indication
             // that we've had another save, check the request was fired instead
             let [lastRequest] = this.server.pretender.handledRequests.slice(-1);

ghost/admin/tests/acceptance/staff-test.js

@@ -1,13 +1,8 @@
-import ctrlOrCmd from 'ghost-admin/utils/ctrl-or-cmd';
 import moment from 'moment-timezone';
 import windowProxy from 'ghost-admin/utils/window-proxy';
 import {Response} from 'miragejs';
 import {afterEach, beforeEach, describe, it} from 'mocha';
 import {authenticateSession, invalidateSession} from 'ember-simple-auth/test-support';
-import {enableLabsFlag} from '../helpers/labs-flag';
-import {enableMembers} from '../helpers/members';
-import {enableStripe} from '../helpers/stripe';
-
 import {
     blur,
     click,
@@ -20,7 +15,11 @@ import {
     triggerEvent,
     triggerKeyEvent
 } from '@ember/test-helpers';
+import {enableLabsFlag} from '../helpers/labs-flag';
+import {enableMembers} from '../helpers/members';
+import {enableStripe} from '../helpers/stripe';
 import {expect} from 'chai';
+import {keyDown} from 'ember-keyboard/test-support/test-helpers';
 import {setupApplicationTest} from 'ember-mocha';
 import {setupMirage} from 'ember-cli-mirage/test-support';
 import {visit} from '../helpers/visit';
@@ -521,11 +520,7 @@ describe('Acceptance: Staff', function () {
 
                 // CMD-S shortcut works
                 await fillIn('[data-test-slug-input]', 'Test User');
-                await triggerEvent('.gh-app', 'keydown', {
+                await keyDown('cmd+s');
-                    keyCode: 83, // s
-                    metaKey: ctrlOrCmd === 'command',
-                    ctrlKey: ctrlOrCmd === 'ctrl'
-                });
 
                 // Since we reset save status so there's no on-screen indication
                 // that we've had a save, check the request was fired instead