vuejs/test-utils

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

Open

#2390 aperta il 27 mar 2024

Vedi su GitHub
 (4 commenti) (0 reazioni) (0 assegnatari)TypeScript (289 fork)auto 404
enhancementgood first issue

Metriche repository

Star
 (1153 star)
Metriche merge PR
 (Metriche PR in attesa)

Descrizione

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 ✌️

Guida contributor