Lo que estoy tratando de hacer es implementar una edición en línea simple, estoy usando un div normal para mostrar el texto cuando el estado de edición es falso y mostrar una entrada cuando el estado de edición es verdadero.

El problema al que me enfrento es que la entrada no se ajusta al contenido de texto que tiene, como lo haría un div con display: inline-block . Intenté configurar el atributo de size de la entrada para que coincida con la longitud del valor actual, pero no se ajusta perfectamente al contenido.

¿Alguna idea de como hacerlo? Supongo que contentEditable en el intervalo en sí, sin una entrada, es una opción, pero quiero poder seleccionar todo el contenido en la entrada cuando se enfoca.

Aquí está el código.

 import { useState, useRef, useEffect } from "react"; export default function App() { const [value, setValue] = useState("test"); const [active, setActive] = useState(false); const ref = useRef(); useEffect(() => { ref.current?.select(); }, [active]); const length = value.split(" ").join("").length; return ( <> {!active && <span onClick={() => setActive(true)}>{value}</span>} {active && ( <input value={value} size={length} ref={ref} onChange={(e) => setValue(e.target.value)} onBlur={() => setActive(false)} /> )} </> ); }