Estoy enfrentando un problema extraño. El texto en un cuadro de entrada en particular se invierte si ingreso un texto después de seleccionar todo el texto actual. Por favor, vea la imagen de abajo. Creé un componente de campo de texto que se usa en el componente principal. No estoy seguro de cómo depurar esto. Intenté usar las herramientas de inspección de Chrome, pero no pude encontrar nada útil. También intenté usar debajo de CSS

 direction: ltr !important;

El código del componente es

 template> <div> <div class="form-group"> <label :for="question.q_question">{{question.q_question}}</label> <input type="text" class="form-control write-direction" v-model="value" :id="question.q_question" :name="question.q_question" value="" @keyup="handleTextboxValue" > </div> </div> </template> <script> export default { props: ['question'], data() { return { value: '' } }, methods:{ handleTextboxValue() { this.$emit('handleTextboxValue', this.question, this.value) } } } </script> <style scoped> label { text-transform: capitalize; } .write-direction { direction: ltr !important; } </style>

EDITAR Esto parece suceder solo con Google Chrome. Probé con firefox y funciona correctamente.

EDIT2 Encontré este hilo: ¿Cómo evitar que los campos de entrada html escriban al revés en los navegadores de cromo?

https://support.google.com/chrome/thread/15141703/google-randomly-starts-typing-backwards-input-character-moves-r-to-l-instead-of-l-to-r?hl= es