@zag-js/pin-input 1.2.0 → 1.2.1

package/dist/index.js

@@ -23,6 +23,10 @@ var getInputEls = (ctx) => {
 var getInputElAtIndex = (ctx, index) => getInputEls(ctx)[index];
 var getFirstInputEl = (ctx) => getInputEls(ctx)[0];
 var getHiddenInputEl = (ctx) => ctx.getById(getHiddenInputId(ctx));
+var setInputValue = (inputEl, value) => {
+  inputEl.value = value;
+  inputEl.setAttribute("value", value);
+};
 
 // src/pin-input.utils.ts
 var REGEX = {
@@ -200,11 +204,11 @@ function connect(service, normalize) {
           }
         },
         onFocus() {
-          queueMicrotask(() => {
-            send({ type: "INPUT.FOCUS", index });
-          });
+          send({ type: "INPUT.FOCUS", index });
         },
-        onBlur() {
+        onBlur(event) {
+          const target = event.relatedTarget;
+          if (domQuery.isHTMLElement(target) && target.dataset.ownedby === getRootId(scope)) return;
           send({ type: "INPUT.BLUR", index });
         }
       });
@@ -399,18 +403,18 @@ var machine = createMachine({
       },
       revertInputValue({ context, computed, scope }) {
         const inputEl = getInputElAtIndex(scope, context.get("focusedIndex"));
-        inputEl.value = computed("focusedValue");
+        setInputValue(inputEl, computed("focusedValue"));
       },
       syncInputValue({ context, event, scope }) {
         const value = context.get("value");
         const inputEl = getInputElAtIndex(scope, event.index);
-        inputEl.value = value[event.index];
+        setInputValue(inputEl, value[event.index]);
       },
       syncInputElements({ context, scope }) {
         const inputEls = getInputEls(scope);
         const value = context.get("value");
         inputEls.forEach((inputEl, index) => {
-          inputEl.value = value[index];
+          setInputValue(inputEl, value[index]);
         });
       },
       setPastedValue({ context, event, computed, flush }) {

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { createAnatomy } from '@zag-js/anatomy';
-import { dispatchInputValueEvent, raf, queryAll, dataAttr, visuallyHiddenStyle, ariaAttr, getBeforeInputValue, getNativeEvent, isComposingEvent, isModifierKey, getEventKey } from '@zag-js/dom-query';
+import { dispatchInputValueEvent, raf, queryAll, dataAttr, visuallyHiddenStyle, ariaAttr, getBeforeInputValue, getNativeEvent, isComposingEvent, isModifierKey, getEventKey, isHTMLElement } from '@zag-js/dom-query';
 import { setValueAtIndex, createSplitProps, invariant } from '@zag-js/utils';
 import { setup } from '@zag-js/core';
 import { createProps } from '@zag-js/types';
@@ -21,6 +21,10 @@ var getInputEls = (ctx) => {
 var getInputElAtIndex = (ctx, index) => getInputEls(ctx)[index];
 var getFirstInputEl = (ctx) => getInputEls(ctx)[0];
 var getHiddenInputEl = (ctx) => ctx.getById(getHiddenInputId(ctx));
+var setInputValue = (inputEl, value) => {
+  inputEl.value = value;
+  inputEl.setAttribute("value", value);
+};
 
 // src/pin-input.utils.ts
 var REGEX = {
@@ -198,11 +202,11 @@ function connect(service, normalize) {
           }
         },
         onFocus() {
-          queueMicrotask(() => {
-            send({ type: "INPUT.FOCUS", index });
-          });
+          send({ type: "INPUT.FOCUS", index });
         },
-        onBlur() {
+        onBlur(event) {
+          const target = event.relatedTarget;
+          if (isHTMLElement(target) && target.dataset.ownedby === getRootId(scope)) return;
           send({ type: "INPUT.BLUR", index });
         }
       });
@@ -397,18 +401,18 @@ var machine = createMachine({
       },
       revertInputValue({ context, computed, scope }) {
         const inputEl = getInputElAtIndex(scope, context.get("focusedIndex"));
-        inputEl.value = computed("focusedValue");
+        setInputValue(inputEl, computed("focusedValue"));
       },
       syncInputValue({ context, event, scope }) {
         const value = context.get("value");
         const inputEl = getInputElAtIndex(scope, event.index);
-        inputEl.value = value[event.index];
+        setInputValue(inputEl, value[event.index]);
       },
       syncInputElements({ context, scope }) {
         const inputEls = getInputEls(scope);
         const value = context.get("value");
         inputEls.forEach((inputEl, index) => {
-          inputEl.value = value[index];
+          setInputValue(inputEl, value[index]);
         });
       },
       setPastedValue({ context, event, computed, flush }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/pin-input",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Core logic for the pin-input widget implemented as a state machine",
   "keywords": [
     "js",
@@ -26,11 +26,11 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "1.2.0",
-    "@zag-js/dom-query": "1.2.0",
-    "@zag-js/utils": "1.2.0",
-    "@zag-js/core": "1.2.0",
-    "@zag-js/types": "1.2.0"
+    "@zag-js/anatomy": "1.2.1",
+    "@zag-js/dom-query": "1.2.1",
+    "@zag-js/utils": "1.2.1",
+    "@zag-js/core": "1.2.1",
+    "@zag-js/types": "1.2.1"
   },
   "devDependencies": {
     "clean-package": "2.2.0"