Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
EnguGH opened this issue May 26, 2023 · 1 comment
Open

Comments

@EnguGH
Copy link

EnguGH commented May 26, 2023

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

@hl037
Copy link
Owner

hl037 commented May 26, 2023

Interesting ! thanks for the report !

I would expect the contenteditable to be destroyed if the cond is false, I have to investigate it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants