From 0456670dac1153340220603c8c116e3b71f72ae7 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 28 Mar 2025 18:52:39 +0100
Subject: [PATCH] feat(PinInput): add `autofocus` / `autofocus-delay` props

Resolves #3717
---
 docs/content/3.components/pin-input.md |  6 ++++++
 src/runtime/components/PinInput.vue    | 27 ++++++++++++++++++++++++--
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/docs/content/3.components/pin-input.md b/docs/content/3.components/pin-input.md
index 2618ca93..cd33de16 100644
--- a/docs/content/3.components/pin-input.md
+++ b/docs/content/3.components/pin-input.md
@@ -177,6 +177,12 @@ props:
 
 :component-emits
 
+When accessing the component via a template ref, you can use the following:
+
+| Name | Type |
+| ---- | ---- |
+| `inputsRef`{lang="ts-type"} | `Ref<ComponentPublicInstance[]>`{lang="ts-type"} |
+
 ## Theme
 
 :component-theme
diff --git a/src/runtime/components/PinInput.vue b/src/runtime/components/PinInput.vue
index 01416e03..415a400a 100644
--- a/src/runtime/components/PinInput.vue
+++ b/src/runtime/components/PinInput.vue
@@ -37,6 +37,8 @@ export interface PinInputProps extends Pick<PinInputRootProps, 'defaultValue' |
    * @defaultValue 5
    */
   length?: number | string
+  autofocus?: boolean
+  autofocusDelay?: number
   highlight?: boolean
   class?: any
   ui?: PartialString<typeof pinInput.slots>
@@ -50,7 +52,8 @@ export type PinInputEmits = PinInputRootEmits & {
 </script>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import type { ComponentPublicInstance } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { PinInputInput, PinInputRoot, useForwardPropsEmits } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 import { useFormField } from '../composables/useFormField'
@@ -58,7 +61,8 @@ import { looseToNumber } from '../utils'
 
 const props = withDefaults(defineProps<PinInputProps>(), {
   type: 'text',
-  length: 5
+  length: 5,
+  autofocusDelay: 0
 })
 const emits = defineEmits<PinInputEmits>()
 
@@ -72,6 +76,14 @@ const ui = computed(() => pinInput({
   highlight: highlight.value
 }))
 
+const inputsRef = ref<ComponentPublicInstance[]>([])
+
+function autoFocus() {
+  if (props.autofocus) {
+    inputsRef.value[0]?.$el?.focus()
+  }
+}
+
 const completed = ref(false)
 function onComplete(value: string[]) {
   // @ts-expect-error - 'target' does not exist in type 'EventInit'
@@ -86,6 +98,16 @@ function onBlur(event: FocusEvent) {
     emitFormBlur()
   }
 }
+
+defineExpose({
+  inputsRef
+})
+
+onMounted(() => {
+  setTimeout(() => {
+    autoFocus()
+  }, props.autofocusDelay)
+})
 </script>
 
 <template>
@@ -100,6 +122,7 @@ function onBlur(event: FocusEvent) {
     <PinInputInput
       v-for="(ids, index) in looseToNumber(props.length)"
       :key="ids"
+      :ref="el => (inputsRef[index] = el as ComponentPublicInstance)"
       :index="index"
       :class="ui.base({ class: props.ui?.base })"
       :disabled="disabled"