fix(theme): prevent docsearch button key from changing (#986)

vuejs · Jul 14, 2022 · d65667b · d65667b
1 parent afd905c
commit d65667b
Showing 1 changed file with 22 additions and 5 deletions.
diff --git a/src/client/theme-default/components/VPNavBarSearch.vue b/src/client/theme-default/components/VPNavBarSearch.vue
@@ -14,17 +14,17 @@ const { theme } = useData()
 // hit the hotkey to invoke it.
 const loaded = ref(false)
 
-const metaKey = ref()
+const metaKey = ref(`'Meta'`)
 
 onMounted(() => {
   if (!theme.value.algolia) {
     return
   }
 
   // meta key detect (same logic as in @docsearch/js)
-  metaKey.value.textContent = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)
-    ? '⌘'
-    : 'Ctrl'
+  metaKey.value = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)
+    ? `'⌘'`
+    : `'Ctrl'`
 
   const handleSearchHotKey = (e: KeyboardEvent) => {
     if (e.key === 'k' && (e.ctrlKey || e.metaKey)) {
@@ -79,7 +79,7 @@ function load() {
           <span class="DocSearch-Button-Placeholder">{{ theme.algolia?.buttonText || 'Search' }}</span>
         </span>
         <span class="DocSearch-Button-Keys">
-          <kbd class="DocSearch-Button-Key" ref="metaKey">Meta</kbd>
+          <kbd class="DocSearch-Button-Key"></kbd>
           <kbd class="DocSearch-Button-Key">K</kbd>
         </span>
       </button>
@@ -255,6 +255,23 @@ function load() {
   padding-right: 6px;
 }
 
+.DocSearch-Button .DocSearch-Button-Key:first-child {
+  font-size: 1px;
+  letter-spacing: -1px;
+  color: transparent;
+}
+
+.DocSearch-Button .DocSearch-Button-Key:first-child:after {
+  content: v-bind(metaKey);
+  font-size: 12px;
+  letter-spacing: normal;
+  color: var(--docsearch-muted-color);
+}
+
+.DocSearch-Button .DocSearch-Button-Key:first-child > * {
+  display: none;
+}
+
 .dark .DocSearch-Footer {
   border-top: 1px solid var(--vp-c-divider);
 }