From 9713760c6000331eb4e4dbc846cb523c2adcdcde Mon Sep 17 00:00:00 2001
From: purocean <purocean@gmail.com>
Date: Tue, 28 Dec 2021 14:10:58 +0800
Subject: [PATCH] fix: fix control center toggling

---
 src/renderer/components/ControlCenter.vue         | 14 +++++++++++---
 src/renderer/plugins/status-bar-control-center.ts |  2 +-
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/renderer/components/ControlCenter.vue b/src/renderer/components/ControlCenter.vue
index b68f6a02..0bc9e4e2 100644
--- a/src/renderer/components/ControlCenter.vue
+++ b/src/renderer/components/ControlCenter.vue
@@ -3,7 +3,7 @@
     v-if="store.state.showControlCenter && schema"
     class="control-center"
     tabindex="0"
-    @blur="toggle(false)"
+    @blur="onBlur"
     ref="container"
   >
     <div v-for="(row, category) in schema" :key="category" class="row">
@@ -24,7 +24,7 @@
 <script lang="ts" setup>
 import { registerAction, removeAction } from '@fe/core/action'
 import { getSchema, Schema, toggle } from '@fe/services/control-center'
-import { nextTick, onBeforeUnmount, ref, watch } from 'vue'
+import { onBeforeUnmount, ref, watch } from 'vue'
 import { useStore } from 'vuex'
 import SvgIcon from './SvgIcon.vue'
 
@@ -33,6 +33,12 @@ const store = useStore()
 
 const container = ref<HTMLElement>()
 
+function onBlur () {
+  setTimeout(() => {
+    toggle(false)
+  }, 0)
+}
+
 registerAction({
   name: 'control-center.refresh',
   handler () {
@@ -46,7 +52,9 @@ onBeforeUnmount(() => {
 
 watch(() => store.state.showControlCenter, (val) => {
   if (val) {
-    nextTick(() => container.value?.focus())
+    setTimeout(() => {
+      container.value?.focus()
+    }, 0)
   }
 })
 
diff --git a/src/renderer/plugins/status-bar-control-center.ts b/src/renderer/plugins/status-bar-control-center.ts
index 1c15d218..ab25392e 100644
--- a/src/renderer/plugins/status-bar-control-center.ts
+++ b/src/renderer/plugins/status-bar-control-center.ts
@@ -10,7 +10,7 @@ export default {
         position: 'right',
         tips: ctx.i18n.t('control-center.control-center', ctx.command.getKeysLabel('control-center.toggle')),
         icon: 'sliders-h-solid',
-        onClick: () => ctx.controlCenter.toggle()
+        onMousedown: () => ctx.controlCenter.toggle()
       }
     })