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.

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

Cannot focus element inside content editable element #2717

Closed
mitar opened this issue Nov 3, 2018 · 10 comments
Closed

Cannot focus element inside content editable element #2717

mitar opened this issue Nov 3, 2018 · 10 comments

Comments

@mitar
Copy link

mitar commented Nov 3, 2018

Current behavior:

If I try to .get a content editable p element, I cannot use .focus() to focus it, since calling .focus on a DOM element inside a contenteditable will not give focus nor set document.activeElement

Desired behavior:

I should be able to focus content editable element to set cursor position to that element

Versions

Cypress: 3.1.1
OS: Linux Ubuntu 18.04

@lilaconlee
Copy link
Contributor

I'm able to focus and type into a content editable paragraph with the following:

cy.get("p")
.focus()
.type("hello")

Do you have a code sample or any additional information that could help us debug?

@jennifer-shehane jennifer-shehane added the stage: needs information Not enough info to reproduce the issue label Nov 5, 2018
@mitar
Copy link
Author

mitar commented Nov 17, 2018

So typing works, but focus does not. For example, if you check this ProseMirror example if you focus on the content editable which is for example all text bold, you will see that the toolbar changes and detect that editor is focused and that content is bold. But if I do .focus() I do not get anything.

It does work if I create a selection manually:

    cy.window().then((window) => {
      cy.get('.editor p').then(($el) => {
        const el = $el.get(0);
        const range = window.document.createRange();
        range.setStart(el, 0);
        range.setEnd(el, 0);

        const selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);
     });
   });

@jennifer-shehane
Copy link
Member

Hey @mitar, the .focus() command is only used to fire the 'focus' event for an element, it is not intended to create a selection range/highlight text.

If you'd like to highlight text as you've shown above, that would require a branch new Cypress command. I'd suggest updating this issue to reflect that feature request if that's the case.

@mitar
Copy link
Author

mitar commented Nov 20, 2018

I mean, focus on content edible is this. From the user perspective. If I click on content editable as an user, it makes a selection in the browser.

So is Cypress API mimicking the user or the events? I thought high level calls like click, type and focus are more about user, and only trigger is about events? If I want focus event, then I can call trigger('focus'), no? But I want focus behavior, so I call focus?

@kuceb
Copy link
Contributor

kuceb commented Nov 20, 2018

@mitar focus does not imply selection. for example in the DOM API, for text inputs, we have .focus() and we have .select(). Focus simply places the cursor in the input, while .select() makes a selection on the existing text as well as giving focus (similar to tabbing into an input).
If you want to select arbitrary text inside a contenteditable, we do not yet offer such a fine-grained API, but are planning to. In the meantime, your current strategy is best practice

@kuceb kuceb closed this as completed Nov 20, 2018
@mitar
Copy link
Author

mitar commented Nov 20, 2018

But in the context of content editable, when you click as user (not select) to focus, you are making a collapsed selection.

I think you should really decide if focus wants to be a high-level function which simulates what would happen if user clicks on a DOM element to focus the element. Or is just trigger('focus').

@kuceb
Copy link
Contributor

kuceb commented Nov 20, 2018

@mitar calling .focus() does in fact make a collapsed selection.
image

calling .focus() places the cursor at the very start of the contenteditable.

We do not cause a click side-effect because that would lead to a lot of confusion.

We are actually changing this API in the next iteration:

  • Currently, if you ask to .type() without having the element in focus, we issue a click (moving the cursor to the end of the text input)
  • In cypress-next, we will focus and move the cursor to the end without issuing a click

@kuceb
Copy link
Contributor

kuceb commented Nov 20, 2018

@mitar ah, I see what you mean now. Calling focus on an element inside a contenteditable does not give that element focus, nor set document.activeElement

we still will be able to append text to it with .type(), but .focus() will not create a selection

@mitar I think .focus() should remain as is, but we should consider this when adding text selection API to cypress

@kuceb kuceb reopened this Nov 20, 2018
@kuceb kuceb changed the title Cannot focus content editable element Cannot focus element inside content editable element Nov 20, 2018
@kuceb kuceb removed the stage: needs information Not enough info to reproduce the issue label Nov 20, 2018
@jennifer-shehane jennifer-shehane added stage: ready for work The issue is reproducible and in scope type: bug labels Dec 3, 2018
@kuceb kuceb self-assigned this Dec 18, 2018
@kuceb kuceb added this to the Sprint 16 milestone Dec 18, 2018
@kuceb kuceb added topic: contenteditable and removed stage: ready for work The issue is reproducible and in scope type: bug labels Dec 18, 2018
@jennifer-shehane jennifer-shehane added the stage: proposal 💡 No work has been done of this issue label Feb 19, 2019
@jennifer-shehane jennifer-shehane removed this from the Sprint 16 milestone Feb 19, 2019
@cypress-bot cypress-bot bot added stage: needs review The PR code is done & tested, needs review stage: work in progress and removed stage: proposal 💡 No work has been done of this issue stage: needs review The PR code is done & tested, needs review labels Sep 11, 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
@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
@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.
Projects
None yet
4 participants