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

Click on table cell inside a contenteditable element does not behave as expected #7721

Closed
erwinheitzman opened this issue Jun 16, 2020 · 4 comments
Closed

Click on table cell inside a contenteditable element does not behave as expected #7721

erwinheitzman opened this issue Jun 16, 2020 · 4 comments
Labels
pkg/driver This is due to an issue in the packages/driver directory topic: cy.type ⌨️ type: bug

Comments

@erwinheitzman
Copy link

erwinheitzman commented Jun 16, 2020 •
edited
Loading

Current behavior:

When clicking a table cell, the table cell is not focused / not the active element so that when I type, the text is not put into the table cell but outside of it.

Desired behavior:

When clicking a table cell I expect the table cell to be focused and set as the active element so that when I type text, the table cell will be filled with text.

Create this html file:

<!DOCTYPE html>
<html>
<body>
  <div contenteditable="true" style="border: 1px solid black; width: 300px;">
      <table style="border: 1px solid black; width: 300px;">
          <tr style="border: 1px solid black">
            <td style="border: 1px solid black"></td>
            <td style="border: 1px solid black"></td>
            <td style="border: 1px solid black"></td>
          </tr>
          <tr style="border: 1px solid black">
            <td style="border: 1px solid black"></td>
            <td style="border: 1px solid black"></td>
            <td style="border: 1px solid black"></td>
          </tr>
          <tr style="border: 1px solid black">
            <td style="border: 1px solid black"></td>
            <td style="border: 1px solid black"></td>
            <td style="border: 1px solid black"></td>
          </tr>
      </table>
  </div>
</body>
</html>

Create testcase:

it('should type inside of the table cell', () => {
      cy.visit('./cypress/integration/example.html');
      cy.get('table tbody tr td').eq(2).click().type('dummy text');
});

Run the testcase to reproduce the issue.

Versions

os: OSX 10.15.4
browser: Chrome 83.0.4103.106
cypress: 4.8.0
@jennifer-shehane
Copy link
Member

@erwinheitzman Thanks for the reproducible example!

index.html

<!DOCTYPE html>
<html>
<body>
  <div contenteditable="true" style="border: 1px solid black; width: 300px;">
    <table style="border: 1px solid black; width: 300px;">
      <tr style="border: 1px solid black">
        <td style="border: 1px solid black"></td>
        <td style="border: 1px solid black"></td>
        <td style="border: 1px solid black"></td>
      </tr>
    </table>
  </div>
</body>
</html>

spec.js

it('should type inside of the table cell', () => {
  cy.visit('index.html')
  cy.get('td').last()
  .type('dummy text')
})

Current behavior

Screen Shot 2020-06-17 at 3 58 32 PM

What should happen

Screen Shot 2020-06-17 at 4 01 39 PM

@cypress-bot cypress-bot bot added the stage: ready for work The issue is reproducible and in scope label Jun 18, 2020
@jennifer-shehane jennifer-shehane added the pkg/driver This is due to an issue in the packages/driver directory label Jun 18, 2020
@sainthkh sainthkh mentioned this issue Sep 9, 2020
Closed
4 tasks
@cypress-bot cypress-bot bot added stage: work in progress stage: needs review The PR code is done & tested, needs review and removed stage: ready for work The issue is reproducible and in scope stage: work in progress stage: needs review The PR code is done & tested, needs review labels Sep 9, 2020
@cypress-bot cypress-bot bot added stage: needs review The PR code is done & tested, needs review and removed stage: work in progress labels Oct 6, 2020
@kuceb
Copy link
Contributor

kuceb commented Oct 19, 2020 •
edited
Loading

Hi @erwinheitzman, looking into this.

Since cy.type(...) will respect the cursor position if the element is already focused, as a workaround you can focus and move the selection before typing e.g.:

cy.get('[contenteditable] td:first')
.then(($el) => {
  const el = $el[0]
  const sel = el.ownerDocument.getSelection()
  // find and focus the containing div[contenteditable] element (focusing the td node is a no-op)
  Cypress.dom.getHostContenteditable(el).focus()
  // move the selection into the td element
  sel.selectAllChildren(el)
})
.type('foobar')

Hope this helps

@cypress-bot cypress-bot bot added stage: work in progress stage: ready for work The issue is reproducible and in scope and removed stage: needs review The PR code is done & tested, needs review stage: work in progress labels Oct 19, 2020
@sainthkh sainthkh mentioned this issue Nov 3, 2020
Merged
3 tasks
@cypress-bot cypress-bot bot added stage: work in progress stage: needs review The PR code is done & tested, needs review and removed stage: ready for work The issue is reproducible and in scope stage: work in progress labels Nov 3, 2020
@cypress-bot cypress-bot bot added stage: pending release and removed stage: needs review The PR code is done & tested, needs review labels Nov 17, 2020
@cypress-bot
Copy link
Contributor

cypress-bot bot commented Nov 17, 2020

The code for this is done in cypress-io/cypress#9066, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

@cypress-bot
Copy link
Contributor

cypress-bot bot commented Nov 24, 2020

Released in 6.0.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v6.0.0, please open a new issue.

@cypress-bot cypress-bot bot locked as resolved and limited conversation to collaborators Nov 24, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
pkg/driver This is due to an issue in the packages/driver directory topic: cy.type ⌨️ type: bug
Projects
None yet
Milestone
No milestone
3 participants
@jennifer-shehane @kuceb @erwinheitzman