Cypress on Chrome fails to type on an editable h6 if the contenteditable was set by JavaScript and the element has a tabindex

eltschka-christopher-auticon commented 6 months ago

Current behavior

Cypress on Chrome fails to type on an editable h6 if the contenteditable was set by JavaScript and the element has a tabindex.

Note that editing succeeds on Firefox, or if contenteditable was set directly as attribute, or if no tabindex attribute was given.

Desired behavior

Cypress should type the text into the editable element.

Test code to reproduce

This test case is self-contained thanks to a mock page, However the real case where I found the problem did not use a mock page, so that fact should be irrelevant to the error.

describe("testing contenteditable", () => {
  it("should allow to edit h6 tag with contenteditable=true", () => {
    const mockpage = `<html lang="EN"><head><title>Workaround</title></head><body>
            <h6 id="target" tabindex="0"
            onclick='document.getElementById("target").setAttribute("contenteditable", "true")'>old</h6>
        </body></html>`;
    cy.intercept("GET", "/mockpage", mockpage);
    cy.visit("/mockpage");
    const selector = "#target";
    cy.get(selector).click();
    cy.get(selector).type("{SelectAll}");
    cy.get(selector).type("new");
    cy.get(selector).should("contain", "new");
  });
});

Cypress Version

13.8.1

Node version

18.19.0

Operating System

Debian GNU/Linux 12 (bookworm)

Debug Logs

Sorry, if I put the entire log here, GitHub complains about the body being too long.

Other

Querying whether the element has contenteditable set (cy.get(selector).invoke("attr", "contenteditable").should("eq", "true"); ) succeeds after the click().

eltschka-christopher-auticon commented 6 months ago

The debug.log as file.

jennifer-shehane commented 6 months ago

That is weird. I can recreate this. The assertion that the new content was typed fails in Chrome but not in Firefox. I tried back to Chrome 118 and it was the same behavior. I also tested back to Cypress 10.0, so this isn't a recently introduced bug.

Chrome Screenshot 2024-04-24 at 3 54 22 PM

Firefox Screenshot 2024-04-24 at 3 54 36 PM

eltschka-christopher-auticon commented 6 months ago

Small update: The problem also occurs on Edge and Electron (not really surprising, given that they use the same browser enginge, but I think worth noting anyway).

MSGawade commented 1 month ago

Do we have any updates on this issue, i'm facing with cypress 13.13.1 as well

cypress-io / cypress