Fixed autofocus not working on modal inputs

refs https://github.com/TryGhost/Ghost/issues/7132
- apply generic `autofocus` support to anything rendered through `liquid-wormhole`
    - overrides `liquid-wormhole`'s default `wormhole` transition, adding a check for a `<input autofocus>` element and calling focus on it once the default transition and liquid-wormhole element swap has completed
- autofocus search input in Unsplash modal
This commit is contained in:
Kevin Ansfield 2018-06-04 17:46:24 +01:00
parent 48f2976fff
commit bc2e216cb0
2 changed files with 23 additions and 1 deletions

View File

@ -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 @@
</div>
{{/if}}
{{/liquid-wormhole}}
{{/liquid-wormhole}}

View File

@ -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();
}
}
});
}