Overcoming Cypress Limitations in Testing Custom Elements' Focus Functionality"

[nnaydenow]

I'm currently in the process of testing my custom elements using Cypress. However, I've encountered an issue with some of these elements that contain internally focusable elements. Accessing these elements directly within the shadow root of the components seems to be necessary. While many of these components feature an enhanced focus function compared to the standard HTMLElement, Cypress raises concerns about the lack of tabindex on these elements, thereby preventing the method from being invoked. Consequently, I'm wondering if there's a workaround to utilize the native focus function without encountering this obstacle?

cy.get("my-custom-element")
  .focus() // Invoking the native focus function to ensure correct element focus

cy.focused() // Actual focused element
  .type("something inside my-custom-element") // Typing inside the focused element inside the custom element

Overall, if the element lacks a meaningful focus function, the document.activeElement wouldn't change, but for some reason Cypress overrides it

Native focus function:

<button id="test1">Test</button>
<div id="test2">Test</div>
<div id="test3" tabindex="0">Test</div>

<script>
    const test1 = document.getElementById("test1")
    const test2 = document.getElementById("test2")
    const test3 = document.getElementById("test3")

    test1.focus();
    // #test1 element is focused
    test2.focus();
    // #test1 element remains focused
    test3.focus();
    // #test3 element is focused
</script>

My question is: Is there any way to keep the original browser behaviour?