Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
eltschka-christopher-auticon opened this issue Apr 24, 2024 · 3 comments
Open

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

eltschka-christopher-auticon opened this issue Apr 24, 2024 · 3 comments
Labels
browser: chrome stage: needs investigating Someone from Cypress needs to look at this type: bug

Comments

@eltschka-christopher-auticon
Copy link

eltschka-christopher-auticon commented Apr 24, 2024 •
edited by jennifer-shehane

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
Copy link
Author

The debug.log as file.

@jennifer-shehane
Copy link
Member

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

@jennifer-shehane jennifer-shehane added the stage: needs investigating Someone from Cypress needs to look at this label Apr 24, 2024
@eltschka-christopher-auticon
Copy link
Author

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).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
browser: chrome stage: needs investigating Someone from Cypress needs to look at this type: bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jennifer-shehane @eltschka-christopher-auticon