fix: add implementation for contenteditable input events

[benedictfischer09]

Firing a change event on an element that is contenteditable enabled throws an error with the following message: The given element does not have a value setter

What:
Changed the fireEvent.change api to transparently check to see if the element is contenteditable and if so, set the element's textContent based on the event's target value.

Why:
Input events are supported on non form elements if the element has contenteditable enabled see https://developer.mozilla.org/en-US/docs/Web/Events/input for more information.

How:
There are no new apis or changes to the interface of existing apis. The existing api handles the contenteditable case without changes to how it handles changes to form elements.

Checklist:

• Documentation added to the docs site N/A
• Typescript definitions updated N/A
• Tests
• Ready to be merged

One thing I'm not confident about is whether delegating an input event's target value to element's textContent setter is a good idea. In seems to make sense in many situations but probably not all

[alexkrolick]

This seems like a limitation that should be addressed in JSDOM if possible, but I'm not seeing any plans to support contenteditable yet: jsdom/jsdom#1670

[benedictfischer09]

Gotcha, are you thinking that if an input event is dispatched then JSDOM should change that element's content based on the event? From what I can tell that is not the case for browsers; dispatching an input event (even on a form input) has no impact on the value property of the element from my tests. So I'd assume JSDOM project probably wouldn't accept that change.

I might be totally misunderstanding the point of setNativeValue but I guess I saw it as a way to make the DOM consistent with what the sythentic event says happened?

[benedictfischer09]

@alexkrolick based on my previous message do you still think this change doesn't really belong in dom-testing-library project?

[alexkrolick]

Yes, I think that if polyfills for events in JSDOM should be moved to a separate library or added to JSDOM itself

Especially something as complex as contenteditable

[kentcdodds]

Thank you for making the effort @benedictfischer09

[smeijer]

@benedictfischer09, did you find a workable solution to test forms with a contentEditable?

I'm using a contentEditable with formik, so I depend on the onChange call.

[citypaul]

+1 for re-considering this functionality.

Unfortunately, at the moment this feature has not been added to JSDOM, but there are people building features in React that require testing ContentEditable, and currently this is not possible with RTL as things currently stand, so far as I can tell.

I'm unable to trigger the onChange, here which means for this feature we're going to have to test the component using Testcafe instead of using RTL, which I would much prefer.

Seeing as right now there is a limitation that prevents testing content editable components, would you be open to re-considering this idea?

[kentcdodds]

Sorry, but what @alexkrolick said originally still applies. You could definitely do what this PR does to test it if you really want to.

[pstephenwille]

One thing that worked for me was to use the 'blur' event to update the field. Testing-Library fires the blur event and my input is changed.

            fireEvent.blur(firstNameField, {target: {textContent: 'changed-first-name'}});

[dominique-mueller]

Ran into the same issues, in my case when trying to connect a "contenteditable" span to Formik in a React project.

First of all, I had to listen to the input event instead of the change event to successfully capture the value. For instance:

const handleInput = (event) => {
  helper.setValue(event.target.textContent)
}

<span contentEditable onInput={handleInput} />

Then, within the corresponding unit test, I wanted to use React Testing Library's fireEvent.input function, but it doesn't do anything. As a workaround, I manually set the contenteditable text content and manually dispatch an input event. For instance:

contenteditableElement.textContent = 'my value'
contenteditableElement.dispatchEvent(
  new Event('input', {
    bubbles: true,
    cancelable: true,
  }),
)

Funnily enough, using fireEvent.focus() and fireEvent.blur() work just fine.

[danawoodman]

For the curious, you can also use blur to set innerHTML like so:

  fireEvent.blur(editor, {
    target: { innerHTML: "<p>hello world</p>" },
  });

[nehalahmed929]

One thing that worked for me was to use the 'blur' event to update the field. Testing-Library fires the blur event and my input is changed.

            fireEvent.blur(firstNameField, {target: {textContent: 'changed-first-name'}});

I also got it working using

            fireEvent.input(firstNameField, {target: {textContent: 'changed-first-name'}});