I'm facing a weird issue. The text in a particular inputbox gets reversed if I enter a text after selecting all the current text. Please see the image below. I have created a textfield component that is used in the parent component. I'm not sure how to debug this. Tried using chrome inspect tools, but couldn't find anything useful. Also tried using below CSS

direction: ltr !important;

The component code is

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>

EDIT This appears to happen only with google chrome. I tested with firefox and its working correctly.

EDIT2 I found this thread - How to avoid html input fields typing backwards in chromium browsers?

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