mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-22 19:32:54 +03:00
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:
parent
48f2976fff
commit
bc2e216cb0
@ -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}}
|
21
ghost/admin/app/transitions/wormhole.js
Normal file
21
ghost/admin/app/transitions/wormhole.js
Normal 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();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
Loading…
Reference in New Issue
Block a user