Click event of an li within ul not triggering the further events. Surprisingly it failed only for first three li, for rest it works fine

[Prashant-Kan]

Current behavior

Testcase gets executed properly. Also the cypress log shows that the element was targeted perfectly and even the click() action is logged but the code under the function which was meant to be called when the element is clicked is not executed.

Scenario:-
By default the options (ie. li tags would be display:none). When click on dropdown arrow they will get display.

Now, if there are 5-6 li then it will create problem. If there are less than 5 then its working fine.

if there are more than 5 options (li) then first two will not able to select but rest other when trigger click its function logic gets executed

i.e in our case we are doing server call and updating some field or show message value which gets failed in assert.

Could you try at your end ?

I would appreciate if you spend some time in this.
we are waiting for this since long

Desired behavior

Click event should be triggered and code under the Function written for the click event should get executed successfully.

Click event should trigger the respective handler and perform the actions.

Test code to reproduce

Kindly consider the below HTML structure

<div>
<a id="dropDown">Click Here To Open Dropdown</a>
<span id="shwMsg" style="display:none">Anchor was clicked</span>
<ul  id="selectoptions">
<li id="opt1" click-"CallServerAndUpdateStatus(1)"><a href="javascript:void(0);"> Option 1</a></li>
<li  id="opt2" click-"CallServerAndUpdateStatus(2)"><a href="javascript:void(0);">Option 2</a></li>
<li  id="opt3" click-"CallServerAndUpdateStatus(3)"><a href="javascript:void(0);">Option 3</a></li>
<li id="opt1" click-"CallServerAndUpdateStatus(4)"><a href="javascript:void(0);"> Option 1</a></li>
<li  id="opt2" click-"CallServerAndUpdateStatus(5)"><a href="javascript:void(0);">Option 2</a></li>
<li  id="opt3" click-"CallServerAndUpdateStatus(6)"><a href="javascript:void(0);">Option 3</a></li>
</ul>
</div>

.js
function  CallServerAndUpdateStatus(paravalue) {
 // console.log(324);
// alert(3443);
// call server api and on success or failure show respective message of passed and failed
$("#shwMsg").show();
}

When user click on an anchor with id dropDown. it opens the ul li dropdown.
but then when user click on li button using below code.

cy.get("#dropDown").click().siblings(`ul#selectoptions").within(() => {
            cy.get("opt2").click();
        });

Click event didn't trigger. Though it closes the dropdown but expected behaviour is to trigger the server call and do the needful.

It works fine in the previous version of cypress till 12.17.0 while in the current version after v13 its not working

Cypress Version

13.12.0

Node version

21

Operating System

Windows 11

Debug Logs

No response

Other

No response