Merge pull request #6652 from nextcloud-libraries/fix/NcEmojiPicker--return-focus-when-on-focusable

fix(NcEmojiPicker): return focus steals actual focus

Author: ShGKme

src/components/NcEmojiPicker/NcEmojiPicker.vue

@@ -195,6 +195,7 @@ This component allows the user to pick an emoji.
 
 <script>
 import { Picker, Emoji, EmojiIndex } from 'emoji-mart-vue-fast'
+import { isFocusable } from 'tabbable'
 import { t } from '../../l10n.js'
 import { getCurrentSkinTone, setCurrentSkinTone } from '../../functions/emoji/emoji.ts'
 import { useTrapStackControl } from '../../composables/useTrapStackControl.ts'
@@ -408,7 +409,10 @@ export default {
 
 		afterHide() {
 			// Manually return focus to the trigger button, as we disabled focus-trap
-			this.$refs.popover.$el.querySelector('button, [role="button"]')?.focus()
+			// But only if there is no focus target outside the picker, for example, input element that received focus by click closing the emoji picker
+			if (!document.activeElement || this.$refs.picker.$el.contains(document.activeElement) || !isFocusable(document.activeElement)) {
+				this.$refs.popover.$el.querySelector('button, [role="button"]')?.focus()
+			}
 		},
 
 		/**