Typing does not work with contenteditable elements

[foxbunny]

I'm on a project using user-event 8.1.0 and dom-testing-ibrary 6.12.2. When I use the type() function on an element with contentEditable==true, then the following error occurs in DTL:

Error: The given element does not have a value setter

From the source, I understand that type() is very specialized for handling normal input elements. I'm therefore not sure if it would be reasonable to look for workarounds for contenteditables here, or maybe I need an entirely different implementation for it. Could someone please give me some pointers?

[rdjpalmer]

I found a quick workaround by switching all references of target.value to target.textContent, e.g.:

  const previousText = element.textContent;

  if (opts.allAtOnce) {
    if (element.readOnly) return;
    fireEvent.input(element, {
      target: { textContent: previousText + computedText },
    });
  }

I don't expect this to work with more complex contenteditable elements, but mine is relatively straight forward in that it has a maximum of 5 chars

[alexkrolick]

In a real browser we can use isContentEditable to switch to an input mode like this for .type(), but JSDOM doesn't support that or very many other ContentEditable features. See previous discussion related to it: testing-library/dom-testing-library#235

You'd need to patch the DOM a lot to make this work.

[kentcdodds]

Yeah, I'm not sure what we can do for contenteditable. It's.... not easy. I'm thinking right now we'll say it's out of scope. If someone wants to contribute something to make it work then feel free to try.

[sibelius]

@rdjpalmer what is your final helper to fix contenteditable?

[rdjpalmer]

@sibelius I didn't go any further than I described above. Ended up not testing that part of the application, as the entire application is simple & easy to test manually