vuejs/test-utils

.setValue to work on `[contenteditable=true]` elements

Open

#2,390 opened on Mar 27, 2024

View on GitHub
 (4 comments) (0 reactions) (0 assignees)TypeScript (289 forks)auto 404
enhancementgood first issue

Repository metrics

Stars
 (1,153 stars)
PR merge metrics
 (PR metrics pending)

Description

Problem

<div contenteditable> is now widely adopted as the way to make Rich text editors on the web. I've noticed that we cannot set the value of these elementes using .setValue as it throws an error, and have to resort to manual workarounds.

Solution

when field.setValue is applied and field is <div contenteditable> element, internally VTU should override Elements textContent or innerHTML prop, depending on the value of attribute value is plaintext-only or 'true'. Since this is not widely supported, just going with innerHTML is probably easier.

https://github.com/vuejs/test-utils/blob/05f76b63b7a45fc05c0ec840dbaf179fa0d750ab/src/domWrapper.ts#L125-L131

else if (this.attributes().contenteditable) { 
   element.innerHTML = value 
  
   this.trigger('input') 
   // trigger `change` for `v-model.lazy` 
   return this.trigger('change') 
}

Additional context

Cheers ✌️

Contributor guide