Skip to content

Commit 907f7c7

Browse files
committed
fix(NcEmojiPicker): return focus steals actual focus
Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
1 parent 37da263 commit 907f7c7

File tree

1 file changed

+5
-1
lines changed

1 file changed

+5
-1
lines changed

src/components/NcEmojiPicker/NcEmojiPicker.vue

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -195,6 +195,7 @@ This component allows the user to pick an emoji.
195195

196196
<script>
197197
import { Picker, Emoji, EmojiIndex } from 'emoji-mart-vue-fast'
198+
import { isFocusable } from 'tabbable'
198199
import { t } from '../../l10n.js'
199200
import { getCurrentSkinTone, setCurrentSkinTone } from '../../functions/emoji/emoji.ts'
200201
import { useTrapStackControl } from '../../composables/useTrapStackControl.ts'
@@ -408,7 +409,10 @@ export default {
408409
409410
afterHide() {
410411
// Manually return focus to the trigger button, as we disabled focus-trap
411-
this.$refs.popover.$el.querySelector('button, [role="button"]')?.focus()
412+
// But only if there is no focus target outside the picker, for example, input element that received focus by click closing the emoji picker
413+
if (!document.activeElement || this.$refs.picker.$el.contains(document.activeElement) || !isFocusable(document.activeElement)) {
414+
this.$refs.popover.$el.querySelector('button, [role="button"]')?.focus()
415+
}
412416
},
413417
414418
/**

0 commit comments

Comments
 (0)