vuejs/test-utils
View on GitHub.setValue to work on `[contenteditable=true]` elements
Open
#2,390 opened on Mar 27, 2024
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.
else if (this.attributes().contenteditable) {
element.innerHTML = value
this.trigger('input')
// trigger `change` for `v-model.lazy`
return this.trigger('change')
}
Additional context
- https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable
- Not sure if being to naive or not and overlooking something. Let me know!
Cheers ✌️