0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-20 22:42:53 -05:00

🐛 Fixed emoji causing page jump in safari (#16026)

fixes: https://github.com/TryGhost/Ghost/issues/15295

- By design Safari [does not support focus on a button
element](https://bugs.webkit.org/show_bug.cgi?id=22261). We have to keep
the focus somehow otherwise we cause page jump in Safari when changing
the emoji. Tabindex -1 is a good choice because it does not mess with a
tab sequence if we have one.
This commit is contained in:
Tihomir Valkanov 2023-02-02 14:59:24 +02:00 committed by GitHub
parent 669b1927aa
commit 7f1e970a0b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -24,7 +24,9 @@
<div class="kg-card kg-callout-card kg-callout-card-{{@payload.backgroundColor}}">
{{#if @payload.calloutEmoji}}
<button type="button" class="kg-callout-emoji {{if this.isPickerVisible "kg-emoji-picker-active"}}" {{on "click" this.changeEmoji}}>{{@payload.calloutEmoji}}</button>
<div tabindex="-1">
<button type="button" class="kg-callout-emoji {{if this.isPickerVisible "kg-emoji-picker-active"}}" {{on "click" this.changeEmoji}}>{{@payload.calloutEmoji}}</button>
</div>
{{/if}}
<KoenigBasicHtmlInput
@html={{@payload.calloutText}}