fix: pin input autofill

Author: segunadebayo

.changeset/bumpy-teams-battle.md

@@ -0,0 +1,5 @@
+---
+"@zag-js/pin-input": patch
+---
+
+Fix issue where OTP SMS autofill doesn't work as expected.

.xstate/pin-input.js

@@ -238,12 +238,15 @@ const fetchMachine = createMachine({
       },
       setFocusedValue({
         context,
-        event
+        event,
+        flush
       }) {
         const focusedValue = computed("focusedValue");
         const focusedIndex = context.get("focusedIndex");
         const value = getNextValue(focusedValue, event.value);
-        context.set("value", setValueAtIndex(computed("_value"), focusedIndex, value));
+        flush(() => {
+          context.set("value", setValueAtIndex(computed("_value"), focusedIndex, value));
+        });
       },
       revertInputValue({
         context,

packages/machines/pin-input/src/pin-input.machine.ts

@@ -196,11 +196,13 @@ export const machine = createMachine({
         const value = fill(event.value, context.get("count"))
         context.set("value", value)
       },
-      setFocusedValue({ context, event, computed }) {
+      setFocusedValue({ context, event, computed, flush }) {
         const focusedValue = computed("focusedValue")
         const focusedIndex = context.get("focusedIndex")
         const value = getNextValue(focusedValue, event.value)
-        context.set("value", setValueAtIndex(computed("_value"), focusedIndex, value))
+        flush(() => {
+          context.set("value", setValueAtIndex(computed("_value"), focusedIndex, value))
+        })
       },
       revertInputValue({ context, computed, scope }) {
         const inputEl = dom.getInputElAtIndex(scope, context.get("focusedIndex"))