contenteditable="plaintext-only" not respected in Chrome

[wobo-bledebur]

Current behavior

Given this element:

<div id="test" contenteditable="plaintext-only"></div>

And this action:

cy.get('#test').type('FOO{enter}BAR')

The content of the element will be FOO<div>BAR</div>, which is the expected behavior when contenteditable="true" but not when contenteditable="plaintext-only".

Desired behavior

Given this action:

cy.get('#test').type('FOO{enter}BAR')

div#test should have the following innerHTML content:

FOO
BAR

Test code to reproduce

Forked repo with failing test case.

Note that if you manually type "FOO", "\<Enter>", "BAR" in the same Chrome window that the automated test had been running, you will get the expected behavior.

Cypress Version

9.5.3

Other

Technically, content-editable="plaintext-only" is considered experimental. But it is widely supported, is used by many existing libraries, and is often the only viable option for allowing multi-line plain text editing for cases when using a <textarea> is not viable due to design requirements. So I wanted to appeal to you to possibly add support. Thank you!

[davidmunechika]

Thanks for providing an example repo- I was able to recreate the issue as you described

[marktnoonan]

Just a quick note, @viniciuspietscher and I happened to take a look at this last night and we think we see what's up.

The cause is likely this line:

$elements.callNativeMethod(doc, 'execCommand', 'insertText', nativeUI, text)

This is how characters are added into a contenteditable element through cy.type(), but the way execCommand handles this seems to be to briefly turn on document.designMode, which makes everything act like regular contenteditable and presumably that overrides the intended behavior of the experimental plaintext-only value.

I don't have a particular way forward to suggest, but wanted to share what we learned looking through the code so it can help the next person, or possibly this will help you create your own workaround for the time being.

[github-actions[bot]]

This issue has not had any activity in 180 days. Cypress evolves quickly and the reported behavior should be tested on the latest version of Cypress to verify the behavior is still occurring. It will be closed in 14 days if no updates are provided.

[cypress-app-bot]

This issue has been closed due to inactivity.