El evento onChange de PinInput Component no funciona con el valor en Chakra-UI, por lo que activa incluso el valor difícil que no cambia y eso hace que se mueva el enfoque automáticamente a la siguiente entrada una vez.

Por ejemplo: cuando trato de establecer falso el estado del atributo manageFocus en el evento onChange, esperaba no mover el foco automáticamente a la siguiente entrada una vez que un campo no está lleno, pero mueve el foco automáticamente a la siguiente entrada una vez aunque el el campo no está lleno.

En ese ejemplo, intente escribir una entrada no válida en el campo de entrada de PIN (puede escribir 6, establecerá el atributo manageFocus en falso) y verá que el estado de manageFocus se habrá establecido en falso después de que Pin Input mueva el foco a la siguiente entrada una vez.

Entonces, ¿hay alguna forma de configurar el evento onChange o establecer el atributo manageFocus antes del cambio de enfoque?

Nota: La instrucción if solo permite números únicos entre 1 y 5 con expresiones regulares.

"^(?:([1-5])(?!. \1)) $"

Puedes ver el código abajo:

 import React, { useState } from "react"; import ReactDOM from "react-dom"; import { HStack, PinInput, PinInputField, ChakraProvider } from "@chakra-ui/react"; function App() { const [value, setValue] = useState(""); const [canMoveNext, setCanMoveNext] = useState(true); const regex = new RegExp("^(?:([1-5])(?!.*\\1))*$"); const handleChange = (e) => { if (!regex.test(e)) { setCanMoveNext(false); return; } setCanMoveNext(true); setValue(e); }; return ( <ChakraProvider> <HStack> <PinInput type="number" manageFocus={canMoveNext} value={value} onChange={handleChange} > <PinInputField /> <PinInputField /> <PinInputField /> <PinInputField /> <PinInputField /> </PinInput> </HStack> </ChakraProvider> ); } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);

También se puede ver en vivo en: codesandbox