@saasmakers/ui 2.0.41 → 2.0.43

package/app/components/fields/FieldInput.vue

@@ -181,6 +181,7 @@ defineExpose({
           :id="id"
           ref="input"
           :autocomplete="autocomplete ? 'on' : 'off'"
+          v-bind="autofocus ? { 'data-autofocus': '' } : {}"
           class="h-full w-full appearance-none items-center rounded-lg font-medium tracking-tight outline-none placeholder-gray-600 dark:placeholder-gray-400"
           :class="{
             'uppercase': uppercase,

package/app/composables/useDialog.ts

@@ -75,8 +75,12 @@ export default function useDialog(
 
       if (panelRef.value) {
         const focusableElements = getFocusableElements(panelRef.value)
+        const autofocusTarget = panelRef.value.querySelector<HTMLElement>('[data-autofocus]')
 
-        if (focusableElements.length > 0) {
+        if (autofocusTarget) {
+          autofocusTarget.focus()
+        }
+        else if (focusableElements.length > 0) {
           focusableElements[0].focus()
         }
         else {

package/app/composables/useKeyboardWarmup.ts

@@ -0,0 +1,44 @@
+// Always-mounted hidden input used to open the mobile keyboard within the user
+// gesture, before any async work (network create) breaks user activation.
+// Kept at module scope so every consumer shares the same singleton input.
+let warmupInput: HTMLInputElement | undefined
+
+export default function useKeyboardWarmup() {
+  const { isDesktopBrowser } = useDevice()
+
+  function ensureWarmupInput() {
+    if (!import.meta.client || warmupInput) {
+      return
+    }
+
+    const input = document.createElement('input')
+
+    input.type = 'text'
+    input.tabIndex = -1
+
+    input.setAttribute('aria-hidden', 'true')
+
+    input.style.cssText = 'position:fixed;top:0;left:0;height:1px;width:1px;opacity:0;pointer-events:none;'
+
+    document.body.appendChild(input)
+
+    warmupInput = input
+  }
+
+  // Must run synchronously inside a user gesture. Focusing a real text input
+  // raises the on-screen keyboard; a later text-to-text focus move (to the
+  // profile name field) keeps it open without needing a fresh gesture.
+  function focusWarmupInput() {
+    if (isDesktopBrowser.value) {
+      return
+    }
+
+    ensureWarmupInput()
+    warmupInput?.focus()
+  }
+
+  return {
+    ensureWarmupInput,
+    focusWarmupInput,
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saasmakers/ui",
-  "version": "2.0.41",
+  "version": "2.0.43",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",