From 93ed3c9a20c4c7fbfca0f5ecd1c57eb90a4cbae6 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Mon, 6 Mar 2023 21:29:00 +0900
Subject: [PATCH] refs #4161 Fix shortcut key with compose box

---
 .../components/TimelineSpace/Contents/Bookmarks.vue        | 7 +++++--
 .../components/TimelineSpace/Contents/DirectMessages.vue   | 7 +++++--
 .../components/TimelineSpace/Contents/Favourites.vue       | 7 +++++--
 .../components/TimelineSpace/Contents/Hashtag/Tag.vue      | 7 +++++--
 src/renderer/components/TimelineSpace/Contents/Home.vue    | 7 +++++--
 .../components/TimelineSpace/Contents/Lists/Show.vue       | 7 +++++--
 src/renderer/components/TimelineSpace/Contents/Local.vue   | 7 +++++--
 .../components/TimelineSpace/Contents/Notifications.vue    | 7 +++++--
 src/renderer/components/TimelineSpace/Contents/Public.vue  | 7 +++++--
 9 files changed, 45 insertions(+), 18 deletions(-)

diff --git a/src/renderer/components/TimelineSpace/Contents/Bookmarks.vue b/src/renderer/components/TimelineSpace/Contents/Bookmarks.vue
index 722e5d72..d364f296 100644
--- a/src/renderer/components/TimelineSpace/Contents/Bookmarks.vue
+++ b/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)
 
diff --git a/src/renderer/components/TimelineSpace/Contents/DirectMessages.vue b/src/renderer/components/TimelineSpace/Contents/DirectMessages.vue
index c82054b5..cbf2c773 100644
--- a/src/renderer/components/TimelineSpace/Contents/DirectMessages.vue
+++ b/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)
diff --git a/src/renderer/components/TimelineSpace/Contents/Favourites.vue b/src/renderer/components/TimelineSpace/Contents/Favourites.vue
index 6601237a..e47639f8 100644
--- a/src/renderer/components/TimelineSpace/Contents/Favourites.vue
+++ b/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)
 
diff --git a/src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue b/src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue
index 25a33f47..5dd66d17 100644
--- a/src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue
+++ b/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)
 
diff --git a/src/renderer/components/TimelineSpace/Contents/Home.vue b/src/renderer/components/TimelineSpace/Contents/Home.vue
index 93b83d29..d73284de 100644
--- a/src/renderer/components/TimelineSpace/Contents/Home.vue
+++ b/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 []
diff --git a/src/renderer/components/TimelineSpace/Contents/Lists/Show.vue b/src/renderer/components/TimelineSpace/Contents/Lists/Show.vue
index 9fc89010..9687751a 100644
--- a/src/renderer/components/TimelineSpace/Contents/Lists/Show.vue
+++ b/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)
 
diff --git a/src/renderer/components/TimelineSpace/Contents/Local.vue b/src/renderer/components/TimelineSpace/Contents/Local.vue
index 8570045e..08914296 100644
--- a/src/renderer/components/TimelineSpace/Contents/Local.vue
+++ b/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)
diff --git a/src/renderer/components/TimelineSpace/Contents/Notifications.vue b/src/renderer/components/TimelineSpace/Contents/Notifications.vue
index 372bb617..2ce05d05 100644
--- a/src/renderer/components/TimelineSpace/Contents/Notifications.vue
+++ b/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)
diff --git a/src/renderer/components/TimelineSpace/Contents/Public.vue b/src/renderer/components/TimelineSpace/Contents/Public.vue
index 514c8d5c..8bdf4d50 100644
--- a/src/renderer/components/TimelineSpace/Contents/Public.vue
+++ b/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)