🐛 Fixed Ctrl/Cmd+S triggering browser save when tags or authors input has focus (#1707)

closes https://github.com/TryGhost/Ghost/issues/11786

`GhTokenInput` uses `PowerSelect` component of `ember-power-select` internally in `app/components/gh-token-input/select-multiple`. 

When you open that component, [you can find](d36f38f39e/addon/components/power-select.ts (L262-L278)) that it calls `stopImmediatePropagation` when ctrl/cmd or meta key is down.

```js
  handleTriggerKeydown(e: KeyboardEvent) {
    if (this.args.onKeydown && this.args.onKeydown(this.storedAPI, e) === false) {
      e.stopImmediatePropagation();
      return;
    }
    if (e.ctrlKey || e.metaKey) {
      e.stopImmediatePropagation();
      return;
    }
    if ((e.keyCode >= 48 && e.keyCode <= 90) || isNumpadKeyEvent(e)) { // Keys 0-9, a-z or numpad keys
      (this.triggerTypingTask as unknown as Performable).perform(e);
    } else if (e.keyCode === 32) {  // Space
      this._handleKeySpace(this.storedAPI, e);
    } else {
      return this._routeKeydown(this.storedAPI, e);
    }
  }
```

Because of that, I had to dispatch event directly to the root of the Ghost admin app.
This commit is contained in:
Kukhyeon Heo 2020-09-22 02:14:57 +09:00 committed by GitHub
parent e17963818d
commit d6bca3d1e8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 34 additions and 0 deletions

View File

@ -65,6 +65,17 @@ class GhTokenInput extends Component {
}
}
// https://github.com/TryGhost/Ghost/issues/11786
// ember-power-select stops propagation of events when ctrl/CMD or meta key is down.
// So, we're dispatching KeyboardEvent directly to the root of ghost app.
if (event.ctrlKey || event.metaKey) {
const copy = new KeyboardEvent(event.type, event);
document.getElementsByClassName('gh-app')[0].dispatchEvent(copy);
event.preventDefault(); // don't show the save dialog.
return false;
}
// fallback to default
return true;
}

View File

@ -1,4 +1,5 @@
import Mirage from 'ember-cli-mirage';
import ctrlOrCmd from 'ghost-admin/utils/ctrl-or-cmd';
import moment from 'moment';
import sinon from 'sinon';
import {authenticateSession, invalidateSession} from 'ember-simple-auth/test-support';
@ -829,5 +830,27 @@ describe('Acceptance: Editor', function () {
'facebook title not present after closing subview'
).to.equal(0);
});
// https://github.com/TryGhost/Ghost/issues/11786
it('save shortcut works when tags/authors field is focused', async function () {
let post = this.server.create('post', {authors: [author]});
await visit(`/editor/post/${post.id}`);
await fillIn('[data-test-editor-title-input]', 'CMD-S Test');
await click('[data-test-psm-trigger]');
await click('[data-test-token-input]');
await triggerEvent('[data-test-token-input]', 'keydown', {
keyCode: 83, // s
metaKey: ctrlOrCmd === 'command',
ctrlKey: ctrlOrCmd === 'ctrl'
});
// Check if save request has been sent correctly.
let [lastRequest] = this.server.pretender.handledRequests.slice(-1);
let body = JSON.parse(lastRequest.requestBody);
expect(body.posts[0].title).to.equal('CMD-S Test');
});
});
});