Click Action is not resolving on Web Components with Slot Content

[JRJurman]

Current behavior

When using native Web Components, if a component has slot content of a specific size (e.g. 3 characters), click event listeners don't appear to trigger when using cy.click. They will trigger if there are fewer characters, or none at all (defaulting to the existing slot content).

All the behavior was validated using this minimal example repo

The bug can be observed in the following browsers (on macOS):

• Canary (v129)
• Chrome (v127)
• Edge (v127)
• Electron (v118)

In the above image, we have two buttons, the first one says Counter: 1, and the second one says Testing: 0. The first one says Counter because that is the default text to show when there is no slot content. The second one says Testing because we passed in that text in the slot. The code looks like the following:

<my-counter id="a" count="0"></my-counter>
<my-counter id="b" count="0">Testing</my-counter>

The first one says 1 because it was successfully clicked on, and the event listener on the button triggered. The second button however still says 0, an unexpected failure.

NOTE: if there are only a few characters in the slot content, then this does appear to work as expected:

In the above image, we've replaced the Testing in the second control with the letter T. This appears to make the test pass successfully.

It does not appear to happen in the following browsers (on macOS):

• Firefox (v128)
• Firefox Nightly (v128)

In the above image, we see both buttons have say 1, indicating that the event listeners triggered correctly.

Note, regardless of browser, clicking on the elements manually in the cypress window does trigger the click handler.

Desired behavior

We would expect in all browsers that regardless of the slot content size, the click handler should trigger when calling cy.click (either on the host element, or an element in the shadow root).

Test code to reproduce

Minimal Reproduction Project with failing tests: https://github.com/JRJurman/cypress-shadow-root-target-minimal-reproduction

Cypress Version

13.13.2

Node version

v19.6.1

Operating System

macOS 14.6.1

Debug Logs

No response

Other

No response

[JRJurman]

Potentially related, when swapping the .click() action with a .type({enter}), I notice that I get a unique error when the slot of a certain size.

-cy.get('my-counter#b').shadow().find('button').click(); 
+cy.get('my-counter#b').shadow().find('button').type('{enter}');

cy.type() failed because it requires a valid typeable element.
The element typed into was:
> <my-counter id="b" count="0">Testing</my-counter>

However this does not appear to happen for the element with no slot content, or when the slot content is very small:

Similarly, this only happens in the affected browsers listed above, not in Firefox.

[JRJurman]

Okay, digging deeper here, I was able to put a breakpoint in the cypress_runner.js, and look up the trace where this error was happening.

I noticed that $elToClick in type.ts#557 was evaluated differently between the two tests.

On Chrome, for <my-counter></my-counter> (no slot content), $elToClick is an array with a single slot element, and activeElement is resolved as a button element.

For <my-counter>T</my-counter> (small amount of slot content), $elToClick is an array with a single button element, and activeElement is resolved as a button element.

For <my-counter>Testing</my-counter> (more slot content), $elToClick is an array with a single my-counter element, and activeElement is resolved as null.

On Firefox, the first two examples behave the same way as chrome, however the last example instead has $elToClick resolving as an array with a single button element, and activeElement resolving as a button element.

The full set of results is the following:

Test Scenario	$elToClick (Chrome)	$elToClick (Firefox)	activeElement (Chrome)	activeElement (Firefox)
<my-counter></my-counter>	slot	slot	button	button
<my-counter>T</my-counter>	button	button	button	button
<my-counter>Testing</my-counter>	my-counter	button	null	button

[JRJurman]

Okay, digging even further here, this looks like this might be an issue related to getShadowElementFromPoint from shadow.ts#11-20, and more specifically, the behavior of node.shadowRoot.elementFromPoint(x, y).

If this is the case, there is potentially a behavior / spec inconsistency to debug. I'm going to try building a codepen to validate if that is the case, and if-so, can start working on a web-platform test to highlight the browser inconsistency.

IF that is the case, we can potentially close this out - it's potentially possible that cypress could code around this, but makes more sense to have the browser implementers work towards making this more consistent.

[JRJurman]

Update: this is in-fact caused by an inconsistency in the behavior of node.shadowRoot.elementFromPoint - I was able to validate this with the following codepen: https://codepen.io/JRJurman/pen/qBzxOJx

Element ID	Slot Content	Chrome / Edge	Safari	Firefox
a	(empty)	SLOT	SLOT	SLOT
b	T	BUTTON	BUTTON	BUTTON
c	Testing	MY-COUNTER	SLOT	BUTTON

[JRJurman]

This appears to be the same issue as listed here: #19260

In that listed issue there is a work-around, as well as a link to the web platform feature to be resolved.

[jennifer-shehane]

@JRJurman Thanks for taking the time to investigate further