mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-24 23:48:13 -05: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
2 changed files with 23 additions and 1 deletions
|
@ -15,6 +15,7 @@
|
||||||
name="searchKeyword"
|
name="searchKeyword"
|
||||||
placeholder="Search free high-resolution photos"
|
placeholder="Search free high-resolution photos"
|
||||||
tabindex="1"
|
tabindex="1"
|
||||||
|
autofocus="autofocus"
|
||||||
autocorrect="off"
|
autocorrect="off"
|
||||||
value=(readonly unsplash.searchTerm)
|
value=(readonly unsplash.searchTerm)
|
||||||
input=(action "updateSearch" target=unsplash value="target.value")
|
input=(action "updateSearch" target=unsplash value="target.value")
|
||||||
|
@ -72,4 +73,4 @@
|
||||||
</div>
|
</div>
|
||||||
{{/if}}
|
{{/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…
Add table
Reference in a new issue