We Keep Coding

Cypress: How to do a cy.type without a click

I'm curious as to why cypress seems to be triggering a click at the beginning of the .type() command. Here's the whole command I'm trying to run:
cy.contains(".rt-tr", "Taoh").type("{downarrow}");
Unfortunately as you can see in the picture below, this type action seems to trigger a click:
I can potentially understand why that might make sense in order to bring that element into focus, but what about if that element IS already focused.
I tried doing
cy.contains(".rt-tr", "Taoh").click().type("{downarrow}");
And it seems to trigger 2 click events. This is confusing to me. Any way to avoid that click would be appreciated. Thanks!

Op was able to solve it by adding .focus
cy.contains(".rt-tr", "Taoh").focus().type("{downarrow}")

What could be blocking my javascript click() function?

I am attempting to write a script to automate some tasks on a third party site. The very first step is simply clicking a div on the nav, but document.getElementById('myId').click() does nothing.
In my searching I found this answer that fully simulates a mouse click: Simulating a mousedown, click, mouseup sequence in Tampermonkey?
However, that also does not work. I did notice that there's a class added when hovering, and the script successfully simulates that. And obviously physically clicking works fine. I'm not sure what else I could be missing
Edit: It turns out that the clicking was just fine, but the site is actually checking pieces of the event such as the coordinates, which is why it appeared to not be functioning properly

If I understand correctly, what you want is this:
document.getElementById('myId').addEventListener('click', myFunction);
This will run the function myFunction() when the element with the ID of "#myId" is clicked.
Hope this helps!
P.S. If this doesn't work, I suggest using Shashank Bhatt's suggestion of checking pointer-events.

Trying to execute a event with javascript on an <a> element

The reason i need to execute the event behind a a element is because i'm working on some kind of autologin, however one of the sites it has to work with is https://create.kahoot.it/#login?a=1&next= the problem is, their login uses an a element for the sign in button, however when i select that element and execute a .click on it it simply doesn't do the same thing as to what happens when a user clicks on it.
I hope someone could answer this question since i couldn't find anything close to this issue anywhere.
Also for the convenience of whoever helps, to select the element from the console you could use:
document.getElementById('sign-in').getElementsByTagName('a')[1];
The way to solve this issue has to be either javascript or JQuery, preferably just plain javascript.

Try this:
document.getElementsByClassName('btn register')[0].click();
This basically is selecting the anchor by its class name and fire click event manually.
UPDATE:
Alright I did some more research and it seems there is another way of triggering that click handler and it is to set href on the window:
var a = document.getElementsByClassName('btn register')[1];
window.location.href = a.href;
I've tried it and seems it is doing the job.

Clicking on Links and Buttons shows focus outline

I am trying to fix a problem in an existing application that uses jQuery. The issue is that whenever I click on any link or button on the page, I see that element take a focus outline (e.g. blue glow in case of Chrome/Safari), as if that element has focus. I have to get rid of that outline after click. I do not think this is a default behavior since I am not able to replicate it on any other site. For that matter, I am not able to replicate it on a simple HTML page that has just one link.
I can not use outline:none
since I have to show the outline in case of focus using tab keys. I have tried using document.activeElement.blur() and $(element).blur() to no luck since some of the event handlers are using event.stopPropagation() and I can not go and change the code for every event handler.
Can anyone please help me with this? What could be the reason a link is retaining focus after clicking? There is nowhere in the code this is being done programmatically since its happening on every single link and button and also some li elements.
Appreciate your help in this regard.

I think that's the default behavior of Chrome and safari.
If you visit this page https://www.linkedin.com/ and click on the Email address and password field then you will see the same thing which is happening with you. I hope I am not wrong..

you can give outline:none;
for the focus/blur on the element: you just add the class .outlineborder
.outline{
outline:inherit !important;
}
$('.button').on('blur').... $(this).addClass('outline');

Toggle Open/Close JS function

I've never posted here before, and I'm hoping you can help me. I have a js function that on click will toggle display and hiding a paragraph. However, I need to nest them upon one another. In other words:
1) Some text here //Click to open
2)This text opens upon click //Click to open
3)This text opens upon click.
They way I have it written now, clicking 1 opens 2 up, but clicking 2 closes everything. I'm just learning JS now, so I'm now the best with it, so I'm hoping the pros here can help me. Here's what my function looks like now http://pastebin.com/ZUzp1pUJ Anyone got any ideas?

I noticed you included jQuery in your HTML but you're not using it anywhere, I'll assume you're new to jQuery and willing to use it.
Here's what you do.
First you should read up on the jQuery Reference. It is extremely useful.
The things you need to give extra attention to are these:
jQuery Selectors - use $('.myClass') instead of getElementsByClassName
jQuery Toggle - or any of it's companions (slideToggle, fadeToggle) to do exactly what you asked for.
and as to your question - stopPropagation - which allows you to trigger only the toggle that you clicked and stop the event from bubbling up through the dom. (and not to trigger it's parents.)
These three combined should do the work. Good luck.