fix: prevent popping command palette when an input is focused

Closes tempestphp/tempest-framework#1591

Author: innocenzi

bun.lock

@@ -3,6 +3,7 @@
   "workspaces": {
     "": {
       "dependencies": {
+        "@vueuse/math": "^13.9.0",
         "highlight.js": "^11.11.1",
         "puppeteer": "^24.11.2",
       },
@@ -230,6 +231,8 @@
 
     "@vueuse/core": ["@vueuse/[email protected]", "", { "dependencies": { "@types/web-bluetooth": "^0.0.21", "@vueuse/metadata": "13.6.0", "@vueuse/shared": "13.6.0" }, "peerDependencies": { "vue": "^3.5.0" } }, "sha512-DJbD5fV86muVmBgS9QQPddVX7d9hWYswzlf4bIyUD2dj8GC46R1uNClZhVAmsdVts4xb2jwp1PbpuiA50Qee1A=="],
 
+    "@vueuse/math": ["@vueuse/[email protected]", "", { "dependencies": { "@vueuse/shared": "13.9.0" }, "peerDependencies": { "vue": "^3.5.0" } }, "sha512-Qk2jqlaEGKwwe2/MBGtUd8nPpzoQPSQTfm2d30NPywjpYdpbI+WqOAE99MuSq9kIRoU7Xq3IYBtxMaLTy6lpsA=="],
+
     "@vueuse/metadata": ["@vueuse/[email protected]", "", {}, "sha512-rnIH7JvU7NjrpexTsl2Iwv0V0yAx9cw7+clymjKuLSXG0QMcLD0LDgdNmXic+qL0SGvgSVPEpM9IDO/wqo1vkQ=="],
 
     "@vueuse/shared": ["@vueuse/[email protected]", "", { "peerDependencies": { "vue": "^3.5.0" } }, "sha512-pDykCSoS2T3fsQrYqf9SyF0QXWHmcGPQ+qiOVjlYSzlWd9dgppB2bFSM1GgKKkt7uzn0BBMV3IbJsUfHG2+BCg=="],
@@ -542,6 +545,8 @@
 
     "@tailwindcss/oxide-wasm32-wasi/tslib": ["[email protected]", "", { "bundled": true }, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
 
+    "@vueuse/math/@vueuse/shared": ["@vueuse/[email protected]", "", { "peerDependencies": { "vue": "^3.5.0" } }, "sha512-e89uuTLMh0U5cZ9iDpEI2senqPGfbPRTHM/0AaQkcxnpqjkZqDYP8rpfm7edOz8s+pOCOROEy1PIveSW8+fL5g=="],
+
     "reka-ui/@vueuse/core": ["@vueuse/[email protected]", "", { "dependencies": { "@types/web-bluetooth": "^0.0.21", "@vueuse/metadata": "12.8.2", "@vueuse/shared": "12.8.2", "vue": "^3.5.13" } }, "sha512-HbvCmZdzAu3VGi/pWYm5Ut+Kd9mn1ZHnn4L5G8kOQTPs/IwIAmJoBrmYk2ckLArgMXZj0AW3n5CAejLUO+PhdQ=="],
 
     "reka-ui/@vueuse/shared": ["@vueuse/[email protected]", "", { "dependencies": { "vue": "^3.5.13" } }, "sha512-dznP38YzxZoNloI0qpEfpkms8knDtaoQ6Y/sfS0L7Yki4zh40LFHEhur0odJC6xTHG5dxWVPiUWBXn+wCG2s5w=="],

composer.json

@@ -3,18 +3,18 @@
 	"type": "project",
 	"description": "Documentation website for the Tempest framework",
 	"require": {
-		"tempest/framework": "^2.2.0",
-		"league/commonmark": "^2.7.0",
-		"symfony/yaml": "^7.3.1",
+		"tempest/framework": "^2.2.1",
+		"league/commonmark": "^2.7.1",
+		"symfony/yaml": "^7.3.3",
 		"spatie/yaml-front-matter": "^2.1",
 		"spatie/browsershot": "^4.4",
 		"assertchris/ellison": "^1.0.2"
 	},
 	"require-dev": {
-		"phpunit/phpunit": "^12.2.5",
-		"symfony/var-dumper": "^7.3.1",
+		"phpunit/phpunit": "^12.4.0",
+		"symfony/var-dumper": "^7.3.4",
 		"carthage-software/mago": "^0.26.1",
-		"rector/rector": "^2.1"
+		"rector/rector": "^2.1.7"
 	},
 	"autoload": {
 		"psr-4": {

composer.lock

@@ -16,6 +16,7 @@
 		"@tailwindcss/vite": "^4.1.11",
 		"@vitejs/plugin-vue": "^6.0.0",
 		"@vueuse/core": "^13.5.0",
+		"@vueuse/math": "^13.9.0",
 		"fuse.js": "^7.1.0",
 		"reka-ui": "^2.3.2",
 		"tailwindcss": "^4.1.11",

package.json

@@ -17,19 +17,25 @@
         </style>
     </x-slot>
 
-    <div class="hero-bg h-full flex justify-center">
-        <div class="w-full">
-            <x-form :action="uri([CodeController::class, 'submit'])">
-                <x-csrf-token/>
-                <div class="grid gap-4 max-full max-w-[66%] mx-auto">
+    <div class="flex justify-center h-full hero-bg">
+        <div class="flex items-center w-full grow">
+            <form :action="uri([CodeController::class, 'submit'])" method="POST" class="w-full">
+                <x-csrf-token />
+                <input type="hidden" name="_method" value="POST">
+                <div class="gap-4 grid mx-auto max-w-[66%] max-full">
                     <input type="hidden" name="lang" :value="$language"/>
                     <label for="code" class="text-xl">Paste your code</label>
-                    <textarea name="code" id="code" class="border-2 border-[--primary] w-full p-4 rounded bg-[var(--code-background)] text-[var(--foreground)]" rows="20" autofocus>{{ $code }}</textarea>
+                    <p class="text-(--ui-text-muted) text-sm mb-4">
+
+                    </p>
+                    <textarea name="code" id="code" class="font-mono bg-(--code-background) p-4 border-(--ui-border-muted) border-2 rounded focus:outline-none w-full text-(--foreground)" rows="20" autofocus>{{ $code }}</textarea>
                     <div class="flex justify-end">
-                        <input type="submit" class="no-primary rounded-md font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-4 py-2 gap-2 ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted)"/>
+                        <button type="submit" class="no-primary cursor-pointer rounded-md font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-4 py-2 gap-2 ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted)">
+                          Submit
+                        </button>
                     </div>
                 </div>
-            </x-form>
+            </form>
         </div>
     </div>
 </x-base>

src/Web/Code/code.view.php

@@ -1,42 +1,24 @@
 <x-base-code>
-    <div class="bg-red p-4 fixed z-[99] right-0 top-0 flex gap-2" :if="!$clean">
+    <div class="top-0 right-0 z-[99] fixed flex gap-2 bg-red p-4" :if="!$clean">
         <a
                 :href="$cleanUrl"
-                class="
-                cursor-pointer
-            bg-white
-            p-2
-            rounded-full
-            shadow-xl
-            border-2 border-transparent
-            hover:bg-tempest-blue-500
-            hover:border-white
-        ">
+                class="bg-white hover:bg-tempest-blue-500 shadow-xl p-2 border-2 hover:border-white border-transparent rounded-full cursor-pointer">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25m18 0A2.25 2.25 0 0 0 18.75 3H5.25A2.25 2.25 0 0 0 3 5.25m18 0V12a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 12V5.25" />
             </svg>
         </a>
         <a
                 :href="$editUrl"
-                class="
-                cursor-pointer
-            bg-white
-            p-2
-            rounded-full
-            shadow-xl
-            border-2 border-transparent
-            hover:bg-tempest-blue-500
-            hover:border-white
-        ">
+                class="bg-white hover:bg-tempest-blue-500 shadow-xl p-2 border-2 hover:border-white border-transparent rounded-full cursor-pointer">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                 <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"/>
             </svg>
         </a>
     </div>
 
-    <div class="flex items-center justify-center h-full absolute top-0 left-0 w-full">
+    <div class="top-0 left-0 absolute flex justify-center items-center w-full h-full">
         <div
-                class="bg-(--ui-bg) border-(--ui-border) rounded-md p-8 max-h-[75%] overflow-scroll"
+                class="bg-(--ui-bg) border-(--ui-border) rounded-md p-8 max-h-[75%] overflow-auto"
                 :class="implode([
                     $center ? 'text-center' : '',
                     $clean ?: 'border'

src/Web/Code/code_preview.view.php

@@ -1,5 +1,6 @@
-import { useMagicKeys, whenever } from '@vueuse/core'
-import type { Ref } from 'vue'
+import { useActiveElement, useMagicKeys, whenever } from '@vueuse/core'
+import { logicAnd } from '@vueuse/math'
+import { computed, type Ref, watchEffect } from 'vue'
 
 interface Options {
 	value: Ref<boolean>
@@ -13,9 +14,14 @@ export function registerPalette(options: Options) {
 		target: document.body,
 		passive: false,
 		onEventFired(e) {
+			if (['INPUT', 'TEXTAREA'].includes((e.target as Element).tagName ?? '')) {
+				return
+			}
+
 			if (e.key === '/' && e.type === 'keydown') {
 				e.preventDefault()
 			}
+
 			if (e.key === 'k' && e.type === 'keydown' && e.metaKey) {
 				e.preventDefault()
 			}
@@ -33,6 +39,13 @@ export function registerPalette(options: Options) {
 		element.addEventListener('click', toggleCommandPalette)
 	})
 
-	whenever(Meta_K, () => options.value.value = !options.value.value)
-	whenever(Slash, () => options.value.value = true)
+	const activeElement = useActiveElement()
+	const notUsingInput = computed(() => !['INPUT', 'TEXTAREA'].includes(activeElement.value?.tagName ?? ''))
+
+	watchEffect(() => {
+		console.log({ Meta_K, Slash, notUsingInput })
+	})
+
+	whenever(logicAnd(Meta_K, notUsingInput), () => options.value.value = !options.value.value)
+	whenever(logicAnd(Slash, notUsingInput), () => options.value.value = true)
 }