vuejs/test-utils

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

Open

#2.390 aberto em 27 de mar. de 2024

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

Métricas do repositório

Stars
 (1.153 stars)
Métricas de merge de PR
 (Métricas PR pendentes)

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

Guia do colaborador

Direção de pesquisa
Pilha de tecnologia
Domain
Tipo Issue
DifficultyDificuldade de implementação estimada para um novo contribuidor, de 1 para alterações muito pequenas a 5 para trabalho de nível especializado.
Tempo estimadoUm intervalo de tempo aproximado para um colaborador experiente investigar, implementar, testar e preparar um pull request.
Status da atividadeQuão disponível o issue aparece agora: novo, ativo, obsoleto, bloqueado ou aguardando entrada do mantenedor.
ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.
Prerequisites
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.