Skip to content

[Bug] Template ref to "element" null value is not handle (upon unmouting) #30

Open
@EnguGH

Description

Bug Report

Hello, I guess I found a bug unless I'm doing something wrong with v-if behaving differently with Vue 3.

Description:
When a <contenteditable/> component is wrapped inside a conditionally displayed element, the value of the ref element can be null which is not handled an generates an error. It is asserted element is never null here :

Steps to Reproduce:

  1. Wrap a <conteneditable /> inside a <div v-if="condition"></div>
  2. Make the condition false for example when @returned event is caught (see code below)

Expected Behavior:
element should not be asserted to be not null and null cases should be handled

Actual Behavior:
You get the following error :

Uncaught TypeError: Cannot read properties of null (reading 'innerText')
    at currentContent (vue-contenteditable.es.js:31:43)
    at update (vue-contenteditable.es.js:41:33)
    at callWithErrorHandling (runtime-core.esm-bundler.js:158:18)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:166:17)
    at HTMLDivElement.invoker (runtime-dom.esm-bundler.js:278:5)
    at remove (runtime-dom.esm-bundler.js:15:14)
    at performRemove (runtime-core.esm-bundler.js:6257:7)
    at remove2 (runtime-core.esm-bundler.js:6271:7)
    at unmount (runtime-core.esm-bundler.js:6226:9)
    at patch (runtime-core.esm-bundler.js:4991:7)

Reproducible Code Snippet:

<script setup lang="ts">
import { ref } from 'vue'

const condition = ref(true)
const msg = ref("Hello world")
</script>

<template>
  <div v-if="condition">
    <contenteditable-component tag="div" :contenteditable="true" v-model="msg" :no-nl="true" :no-html="true" @returned="condition = !condition" />
  </div>
</template>

** Environment:**
"vue": "^3.2.47",
"vue-contenteditable": "^4.1.0"
Node : v18.16.0

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions