Firefox / Vue 2 : it seems that an horizontal resize event resets a textarea to an old state

[FabriceSalvaire]

I noticed that on Firefox when we press Ctrl+B, or simply resize horizontally the browser window, that a textarea is reset to an old state (original one). Thus, it seems to be triggered by a resize event. Looks like Vue redraw the page with the original value.

I don't figure out a flaw in my code. Moreover, Google Chrome doesn't have this issue.

Do you any clue for that ? Is it a Vue issue ? Or a Firefox issue ?

Vue code is :

.editor-markdown-simple-editor(:style='simpleEditor ? `` : `display:  none`')
  textarea(
    ref='simpleEditor'
    :value='simpleEditorContent'
   @input='onSimpleEditorContentInput()'
)

This is a maintained code implemented with Vue 2.

[skirtles-code]

Not directly an answer to your question, but...

What does onSimpleEditorContentInput do? Does it update simpleEditorContent? Ideally you'd want to ensure that simpleEditorContent is always kept in-sync with the current value of the <textarea> so that the <textarea> can safely be re-rendered using simpleEditorContent.

[KaloudasDev]

Hello! This is likely a Vue 2 reactivity issue combined with Firefox's specific event handling. Here are the solutions:

Solution 1: Ensure Proper Two-Way Data Binding

<template>
  <div class="editor-markdown-simple-editor" :style='simpleEditor ? `` : `display: none`'>
    <textarea
      ref='simpleEditor'
      :value='simpleEditorContent'
      @input='onSimpleEditorContentInput($event)'
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      simpleEditorContent: '',
      simpleEditor: true
    }
  },
  methods: {
    onSimpleEditorContentInput(event) {
      this.simpleEditorContent = event.target.value;
    }
  }
}
</script>

Solution 2: Use v-model for Simpler Cases

<template>
  <div class="editor-markdown-simple-editor" v-if="simpleEditor">
    <textarea v-model="simpleEditorContent" />
  </div>
</template>

Solution 3: Add Key for Force Re-rendering

<template>
  <div class="editor-markdown-simple-editor" :style='simpleEditor ? `` : `display: none`'>
    <textarea
      :key="textareaKey"
      ref='simpleEditor'
      :value='simpleEditorContent'
      @input='onSimpleEditorContentInput($event)'
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      simpleEditorContent: '',
      simpleEditor: true,
      textareaKey: 0
    }
  },
  methods: {
    onSimpleEditorContentInput(event) {
      this.simpleEditorContent = event.target.value;
    }
  },
  mounted() {
    window.addEventListener('resize', this.forceTextareaUpdate);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.forceTextareaUpdate);
  },
  methods: {
    forceTextareaUpdate() {
      this.textareaKey += 1;
    }
  }
}
</script>

Solution 4: Direct DOM Manipulation Prevention

methods: {
  onSimpleEditorContentInput(event) {
    this.simpleEditorContent = event.target.value;
    this.$nextTick(() => {
      if (this.$refs.simpleEditor.value !== this.simpleEditorContent) {
        this.$refs.simpleEditor.value = this.simpleEditorContent;
      }
    });
  }
}

The issue is likely that Firefox triggers reflows differently during resize events, causing Vue to re-render with stale data. Solution 1 with proper event handling is the most reliable approach, as it ensures the reactive data always matches the current DOM state.