El truco más limpio para áreas textiles de crecimiento automático

A principios de este año escribí un poco sobre entradas y áreas de texto de crecimiento automático . La idea era hacer que a se textareaparezca más a a divpara que se expanda en altura tanto como sea necesario para contener el valor actual. Es casi extraño que no exista una solución nativa simple para esto, ¿no es así? Volviendo a leer ese artículo, ninguna de mis ideas era particularmente buena. Pero la idea de Stephen Shaw a la que me vinculé hacia el final es en realidad una muy buena idea para esto, así que quería arrojar algo de luz sobre eso y hablar sobre cómo funciona, porque parece que es la respuesta final a cómo funciona esta UX. Se puede hacer hasta que consigamos algo nativo y mejor.

Aquí está la demostración en caso de que solo quiera un ejemplo práctico:

El truco consiste en replicar exactamente el contenido de textareaen un elemento que puede expandirse automáticamente en altura y coincidir con su tamaño.

Entonces tienes un textarea, que no puede expandir automáticamente la altura.

En cambio, replica exactamente la apariencia, el contenido y la posición del elemento en otro elemento. Ocultas la réplica visualmente (también podrías dejar visible la que es técnicamente funcional).

Ahora los tres elementos están unidos entre sí. Cualquiera de los niños que sea más alto empujará al padre a esa altura y el otro niño lo seguirá. Esto significa que la altura mínima del textarease convertirá en la altura “base”, pero si el elemento de texto replicado crece, todo crecerá con él.

Tan inteligente. Lo amo tanto.

Debes asegurarte de que el elemento replicado sea exactamente el mismo.

Misma fuente, mismo relleno, mismo margen, mismo borde… todo. Es una copia idéntica, solo que está oculta visualmente con visibility: hidden;. Si no es exactamente igual, no todo crecerá exactamente bien.

También necesitamos white-space: pre-wrap;el texto replicado porque así es como se comportan las áreas de texto.

Esta es la parte más rara

En mi demostración , lo estoy usando ::afterpara el texto replicado. No estoy seguro de si ese es el mejor enfoque posible o no. Me parece limpio, pero me pregunto si usar a div aria-hidden="true"es más seguro para los lectores de pantalla. ¿O tal vez visibility: hidden;sea suficiente para eso? De todos modos, esa no es la parte rara. Esta es la parte rara:

content: attr(data-replicated-value) " ";

Debido a que estoy usando un pseudoelemento, esa es la línea que quita el dataatributo del elemento y presenta el contenido en la página con ese espacio adicional (esa es la parte extraña). Si no lo hace, el resultado final se sentirá “saltoso”. No puedo decir que lo entiendo del todo, pero parece que respeta mejor el comportamiento de salto de línea en el área de texto y los elementos de texto.

Si no quieres usar un pseudoelemento, por mí está bien, solo observa el comportamiento nervioso.

---

Un saludo especial para Will Earp y Martin Tillmann, quienes enviaron correos electrónicos al azar exactamente el mismo día para recordarme lo inteligente que es la técnica de Shaw. Aquí hay un ejemplo que Martin hizo con Alpine.js y Tailwind que también termina como una frase ingeniosa (pero observe cómo se pone nervioso).

Estoy seguro de que podrán imaginar cómo hacer esto con Vue y React y demás de una manera que pueda mantener muy fácilmente el estado en un área de texto y otro elemento. No voy a incluir ejemplos aquí, en parte porque soy vago, pero sobre todo porque creo que deberías entender cómo funciona esto. Le hará más inteligente y comprenderá mejor su sitio.