diff --git a/ghost/admin/app/templates/components/gh-unsplash.hbs b/ghost/admin/app/templates/components/gh-unsplash.hbs index 9ee945bdea..b0afd00ad5 100644 --- a/ghost/admin/app/templates/components/gh-unsplash.hbs +++ b/ghost/admin/app/templates/components/gh-unsplash.hbs @@ -15,6 +15,7 @@ name="searchKeyword" placeholder="Search free high-resolution photos" tabindex="1" + autofocus="autofocus" autocorrect="off" value=(readonly unsplash.searchTerm) input=(action "updateSearch" target=unsplash value="target.value") @@ -72,4 +73,4 @@ {{/if}} -{{/liquid-wormhole}} +{{/liquid-wormhole}} \ No newline at end of file diff --git a/ghost/admin/app/transitions/wormhole.js b/ghost/admin/app/transitions/wormhole.js new file mode 100644 index 0000000000..80dc07a4e8 --- /dev/null +++ b/ghost/admin/app/transitions/wormhole.js @@ -0,0 +1,21 @@ +import wormhole from 'liquid-wormhole/transitions/wormhole'; + +// override liquid-wormhole's default `wormhole` transition to focus the first +// autofocus element after the transition and element swap happens + +export default function () { + let newWormholeElement; + + if (this.newElement) { + newWormholeElement = this.newElement.find('.liquid-wormhole-element:last-child'); + } + + return wormhole.apply(this, arguments).finally(() => { + if (this.newElement && newWormholeElement) { + let autofocusElem = newWormholeElement[0].querySelector('[autofocus]'); + if (autofocusElem) { + autofocusElem.focus(); + } + } + }); +}