Al intentar implementar una entrada de texto con una selección que inserta opciones en la entrada (en la posición del cursor), noté que el comportamiento de deshacer/rehacer es inconsistente con los navegadores que probé (chrome v94, firefox 89, safari 14, edge v93 )

A continuación se muestra un ejemplo de código de muestra en el que puede notar la diferencia de comportamiento entre dos entradas, una en la que el valor se establece tal cual y otra en la que el valor se transforma en mayúsculas.

ctrl/cmd + z funciona para deshacer y ctrl/cmd + shift + z funciona para rehacer solo en la primera entrada

 const { useState } = React; const Example = () => { const [text, setText] = useState(""); const [upperCaseText, setUpperCaseText] = useState(""); return ( <div className="App"> <input type="text" value={text} onChange={({ target }) => setText(target.value)} placeholder="text set as is" /> <input type="text" value={upperCaseText} onChange={({ target }) => setUpperCaseText(target.value.toUpperCase())} placeholder="text uppercased" /> </div> ) }; ReactDOM.render( <Example />, document.body );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>

Hay una publicación y respuesta similares aquí , pero solo funciona con limitaciones, document.execCommand está en desuso y no es compatible con Firefox. También intenté enviar un evento y forzar el valor de entrada como se describe aquí e incluso enviar eventos de keydown de teclado, pero aunque el campo de entrada está lleno, los navegadores aún no reconocen esas entradas como entradas del usuario y las excluyen de la entrada deshacer/ rehacer la historia.

¿Hay alguna manera de que los navegadores traten los cambios programáticos en la entrada de la misma manera que la entrada manual del usuario (presionar una tecla o pegar en el portapapeles), o hay que implementar un historial de cambios de entrada personalizado aquí?