refs #4161 Fix shortcut key with compose box

src/renderer/components/TimelineSpace/Contents/Bookmarks.vue

@@ -24,7 +24,7 @@
 <script lang="ts">
 import { computed, defineComponent, onMounted, ref, watch, reactive } from 'vue'
 import { logicAnd } from '@vueuse/math'
-import { useMagicKeys, whenever } from '@vueuse/core'
+import { useActiveElement, useMagicKeys, whenever } from '@vueuse/core'
 import { useStore } from '@/store'
 import { useI18next } from 'vue3-i18next'
 import { useRoute } from 'vue-router'
@@ -52,6 +52,7 @@ export default defineComponent({
     const loading = ref(false)
     const lazyLoading = ref(false)
     const { j, k, Ctrl_r } = useMagicKeys()
+    const activeElement = useActiveElement()
 
     const win = (window as any) as MyWindow
     const id = computed(() => parseInt(route.params.id as string))
@@ -67,7 +68,9 @@ export default defineComponent({
     const startReload = computed(() => store.state.TimelineSpace.HeaderMenu.reload)
     const modalOpened = computed<boolean>(() => store.getters[`TimelineSpace/Modals/modalOpened`])
     const currentFocusedIndex = computed(() => bookmarks.value.findIndex(toot => focusedId.value === toot.uri))
-    const shortcutEnabled = computed(() => !modalOpened.value)
+    const shortcutEnabled = computed(
+      () => activeElement.value?.tagName !== 'INPUT' && activeElement.value?.tagName !== 'TEXTAREA' && !modalOpened.value
+    )
     const userAgent = computed(() => store.state.App.userAgent)
     const backgroundColor = computed(() => store.state.App.theme.background_color)
 

src/renderer/components/TimelineSpace/Contents/DirectMessages.vue

@@ -24,7 +24,7 @@
 <script lang="ts">
 import { defineComponent, ref, computed, onMounted, onBeforeUpdate, watch, reactive } from 'vue'
 import { logicAnd } from '@vueuse/math'
-import { useMagicKeys, whenever } from '@vueuse/core'
+import { useActiveElement, useMagicKeys, whenever } from '@vueuse/core'
 import { useStore } from '@/store'
 import { useI18next } from 'vue3-i18next'
 import { useRoute } from 'vue-router'
@@ -46,6 +46,7 @@ export default defineComponent({
     const route = useRoute()
     const i18n = useI18next()
     const { j, k } = useMagicKeys()
+    const activeElement = useActiveElement()
 
     const win = (window as any) as MyWindow
     const id = computed(() => parseInt(route.params.id as string))
@@ -62,7 +63,9 @@ export default defineComponent({
     const timeline = computed(() => store.state.TimelineSpace.Contents.DirectMessages.timeline[id.value])
     const modalOpened = computed<boolean>(() => store.getters[`TimelineSpace/Modals/modalOpened`])
     const currentFocusedIndex = computed(() => timeline.value.findIndex(toot => focusedId.value === toot.uri + toot.id))
-    const shortcutEnabled = computed(() => !modalOpened.value)
+    const shortcutEnabled = computed(
+      () => activeElement.value?.tagName !== 'INPUT' && activeElement.value?.tagName !== 'TEXTAREA' && !modalOpened.value
+    )
 
     onMounted(async () => {
       const [a, s]: [LocalAccount, LocalServer] = await win.ipcRenderer.invoke('get-local-account', id.value)

src/renderer/components/TimelineSpace/Contents/Favourites.vue

@@ -25,7 +25,7 @@
 <script lang="ts">
 import { defineComponent, computed, ref, onMounted, onUnmounted, watch, reactive } from 'vue'
 import { logicAnd } from '@vueuse/math'
-import { useMagicKeys, whenever } from '@vueuse/core'
+import { useActiveElement, useMagicKeys, whenever } from '@vueuse/core'
 import { useStore } from '@/store'
 import { ElMessage } from 'element-plus'
 import { useI18next } from 'vue3-i18next'
@@ -50,6 +50,7 @@ export default defineComponent({
     const focusedId = ref<string | null>(null)
     const scroller = ref<any>()
     const { j, k, Ctrl_r } = useMagicKeys()
+    const activeElement = useActiveElement()
 
     const win = (window as any) as MyWindow
     const id = computed(() => parseInt(route.params.id as string))
@@ -67,7 +68,9 @@ export default defineComponent({
     const nextMaxId = ref<string | null>(null)
     const modalOpened = computed<boolean>(() => store.getters[`TimelineSpace/Modals/modalOpened`])
     const currentFocusedIndex = computed(() => favourites.value.findIndex(status => focusedId.value === status.uri))
-    const shortcutEnabled = computed(() => !modalOpened.value)
+    const shortcutEnabled = computed(
+      () => activeElement.value?.tagName !== 'INPUT' && activeElement.value?.tagName !== 'TEXTAREA' && !modalOpened.value
+    )
     const userAgent = computed(() => store.state.App.userAgent)
     const backgroundColor = computed(() => store.state.App.theme.background_color)
 

src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue

@@ -25,7 +25,7 @@
 <script lang="ts">
 import { computed, defineComponent, onBeforeUnmount, onMounted, ref, toRefs, watch, reactive } from 'vue'
 import { logicAnd } from '@vueuse/math'
-import { useMagicKeys, whenever } from '@vueuse/core'
+import { useMagicKeys, whenever, useActiveElement } from '@vueuse/core'
 import { ElMessage } from 'element-plus'
 import generator, { Entity, MegalodonInterface } from 'megalodon'
 import { useI18next } from 'vue3-i18next'
@@ -46,6 +46,7 @@ export default defineComponent({
     const route = useRoute()
     const i18n = useI18next()
     const { j, k, Ctrl_r } = useMagicKeys()
+    const activeElement = useActiveElement()
 
     const win = (window as any) as MyWindow
     const id = computed(() => parseInt(route.params.id as string))
@@ -66,7 +67,9 @@ export default defineComponent({
     const startReload = computed(() => store.state.TimelineSpace.HeaderMenu.reload)
     const modalOpened = computed<boolean>(() => store.getters[`TimelineSpace/Modals/modalOpened`])
     const currentFocusedIndex = computed(() => statuses.value.findIndex(toot => focusedId.value === toot.uri + toot.id))
-    const shortcutEnabled = computed(() => !modalOpened.value)
+    const shortcutEnabled = computed(
+      () => activeElement.value?.tagName !== 'INPUT' && activeElement.value?.tagName !== 'TEXTAREA' && !modalOpened.value
+    )
     const userAgent = computed(() => store.state.App.userAgent)
     const backgroundColor = computed(() => store.state.App.theme.background_color)
 

src/renderer/components/TimelineSpace/Contents/Home.vue

@@ -31,7 +31,7 @@
 <script lang="ts">
 import { defineComponent, ref, computed, onMounted, onBeforeUpdate, watch, onUnmounted, reactive } from 'vue'
 import { logicAnd } from '@vueuse/math'
-import { useMagicKeys, whenever } from '@vueuse/core'
+import { useActiveElement, useMagicKeys, whenever } from '@vueuse/core'
 import { ElMessage } from 'element-plus'
 import { Entity } from 'megalodon'
 import { useI18next } from 'vue3-i18next'
@@ -54,6 +54,7 @@ export default defineComponent({
     const route = useRoute()
     const i18n = useI18next()
     const { j, k } = useMagicKeys()
+    const activeElement = useActiveElement()
 
     const win = (window as any) as MyWindow
 
@@ -76,7 +77,9 @@ export default defineComponent({
     const modalOpened = computed<boolean>(() => store.getters[`TimelineSpace/Modals/modalOpened`])
     const filters = computed(() => store.getters[`${space}/filters`])
     const currentFocusedIndex = computed(() => timeline.value.findIndex(toot => focusedId.value === toot.uri + toot.id))
-    const shortcutEnabled = computed(() => !modalOpened.value)
+    const shortcutEnabled = computed(
+      () => activeElement.value?.tagName !== 'INPUT' && activeElement.value?.tagName !== 'TEXTAREA' && !modalOpened.value
+    )
     const filteredTimeline = computed(() => {
       if (!timeline.value) {
         return []

src/renderer/components/TimelineSpace/Contents/Lists/Show.vue

@@ -25,7 +25,7 @@
 <script lang="ts">
 import { defineComponent, toRefs, ref, computed, onMounted, watch, onUnmounted, reactive } from 'vue'
 import { logicAnd } from '@vueuse/math'
-import { useMagicKeys, whenever } from '@vueuse/core'
+import { useActiveElement, useMagicKeys, whenever } from '@vueuse/core'
 import { ElMessage } from 'element-plus'
 import { useI18next } from 'vue3-i18next'
 import generator, { Entity, MegalodonInterface } from 'megalodon'
@@ -46,6 +46,7 @@ export default defineComponent({
     const route = useRoute()
     const i18n = useI18next()
     const { j, k, Ctrl_r } = useMagicKeys()
+    const activeElement = useActiveElement()
 
     const win = (window as any) as MyWindow
     const id = computed(() => parseInt(route.params.id as string))
@@ -66,7 +67,9 @@ export default defineComponent({
     const startReload = computed(() => store.state.TimelineSpace.HeaderMenu.reload)
     const modalOpened = computed<boolean>(() => store.getters[`TimelineSpace/Modals/modalOpened`])
     const currentFocusedIndex = computed(() => statuses.value.findIndex(toot => focusedId.value === toot.uri + toot.id))
-    const shortcutEnabled = computed(() => !modalOpened.value)
+    const shortcutEnabled = computed(
+      () => activeElement.value?.tagName !== 'INPUT' && activeElement.value?.tagName !== 'TEXTAREA' && !modalOpened.value
+    )
     const userAgent = computed(() => store.state.App.userAgent)
     const backgroundColor = computed(() => store.state.App.theme.background_color)
 

src/renderer/components/TimelineSpace/Contents/Local.vue

@@ -24,7 +24,7 @@
 <script lang="ts">
 import { computed, defineComponent, onBeforeUpdate, onMounted, onUnmounted, ref, watch, reactive } from 'vue'
 import { logicAnd } from '@vueuse/math'
-import { useMagicKeys, whenever } from '@vueuse/core'
+import { useActiveElement, useMagicKeys, whenever } from '@vueuse/core'
 import { ElMessage } from 'element-plus'
 import { Entity } from 'megalodon'
 import { useI18next } from 'vue3-i18next'
@@ -46,6 +46,7 @@ export default defineComponent({
     const route = useRoute()
     const i18n = useI18next()
     const { j, k } = useMagicKeys()
+    const activeElement = useActiveElement()
 
     const win = (window as any) as MyWindow
     const id = computed(() => parseInt(route.params.id as string))
@@ -63,7 +64,9 @@ export default defineComponent({
 
     const modalOpened = computed<boolean>(() => store.getters[`TimelineSpace/Modals/modalOpened`])
     const currentFocusedIndex = computed(() => timeline.value.findIndex(toot => focusedId.value === toot.uri + toot.id))
-    const shortcutEnabled = computed(() => !modalOpened.value)
+    const shortcutEnabled = computed(
+      () => activeElement.value?.tagName !== 'INPUT' && activeElement.value?.tagName !== 'TEXTAREA' && !modalOpened.value
+    )
 
     onMounted(async () => {
       const [a, s]: [LocalAccount, LocalServer] = await win.ipcRenderer.invoke('get-local-account', id.value)

src/renderer/components/TimelineSpace/Contents/Notifications.vue

@@ -30,7 +30,7 @@
 <script lang="ts">
 import { defineComponent, ref, computed, onMounted, onBeforeUpdate, onUnmounted, watch, reactive } from 'vue'
 import { logicAnd } from '@vueuse/math'
-import { useMagicKeys, whenever } from '@vueuse/core'
+import { useActiveElement, useMagicKeys, whenever } from '@vueuse/core'
 import { ElMessage } from 'element-plus'
 import { Entity } from 'megalodon'
 import Notification from '@/components/organisms/Notification.vue'
@@ -54,6 +54,7 @@ export default defineComponent({
     const route = useRoute()
     const i18n = useI18next()
     const { j, k } = useMagicKeys()
+    const activeElement = useActiveElement()
 
     const win = (window as any) as MyWindow
 
@@ -73,7 +74,9 @@ export default defineComponent({
     const modalOpened = computed<boolean>(() => store.getters[`TimelineSpace/Modals/modalOpened`])
     const filters = computed(() => store.getters[`${space}/filters}`])
     const currentFocusedIndex = computed(() => notifications.value.findIndex(notification => focusedId.value === notification.id))
-    const shortcutEnabled = computed(() => !modalOpened.value)
+    const shortcutEnabled = computed(
+      () => activeElement.value?.tagName !== 'INPUT' && activeElement.value?.tagName !== 'TEXTAREA' && !modalOpened.value
+    )
 
     onMounted(async () => {
       const [a, s]: [LocalAccount, LocalServer] = await win.ipcRenderer.invoke('get-local-account', id.value)

src/renderer/components/TimelineSpace/Contents/Public.vue

@@ -25,7 +25,7 @@
 <script lang="ts">
 import { computed, defineComponent, onBeforeUpdate, onMounted, onUnmounted, ref, watch, reactive } from 'vue'
 import { logicAnd } from '@vueuse/math'
-import { useMagicKeys, whenever } from '@vueuse/core'
+import { useActiveElement, useMagicKeys, whenever } from '@vueuse/core'
 import { ElMessage } from 'element-plus'
 import generator, { Entity, MegalodonInterface } from 'megalodon'
 import { useI18next } from 'vue3-i18next'
@@ -46,6 +46,7 @@ export default defineComponent({
     const route = useRoute()
     const i18n = useI18next()
     const { j, k } = useMagicKeys()
+    const activeElement = useActiveElement()
 
     const win = (window as any) as MyWindow
     const id = computed(() => parseInt(route.params.id as string))
@@ -65,7 +66,9 @@ export default defineComponent({
     const modalOpened = computed<boolean>(() => store.getters[`TimelineSpace/Modals/modalOpened`])
     const filters = computed(() => store.getters[`${space}/filters`])
     const currentFocusedIndex = computed(() => statuses.value.findIndex(toot => focusedId.value === toot.uri + toot.id))
-    const shortcutEnabled = computed(() => !modalOpened.value)
+    const shortcutEnabled = computed(
+      () => activeElement.value?.tagName !== 'INPUT' && activeElement.value?.tagName !== 'TEXTAREA' && !modalOpened.value
+    )
     const userAgent = computed(() => store.state.App.userAgent)
     const backgroundColor = computed(() => store.state.App.theme.background_color)