Clicking on Links and Buttons shows focus outline - javascript

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');

Related

Why do clicks within Popover.Panel close the panel when within Tab.Panel?

I've been using #headlessui/react for a project and it's helped me be very productive! But I've found an issue where one component interferes with another. I think I've found the general area of the issue and can provide a reproduction but I want to know:
Why specifically is this happening?
What solutions might fix this behavior either as a workaround or within the headlessui/react library itself?
The Issue
When using the Popover component within a Tab.Panel component, the Popover.Panel does not behave correctly. According to the docs:
When the panel is open, clicking anywhere outside of its contents, pressing the Escape key, or tabbing away from it will close the Popover.
However, when the Popover is within a Tab component (docs) the behavior is inconsistent. For me, in Chrome, clicks within the Popover.Panel close the panel unless the click is on a button and in Safari the panel closes in all cases. Focusing the button with the keyboard allows selection though.
Reproduction
I created a simplified version of the issue in codesandbox
I think this has something to do with the Tab component capturing the focus from the Popover.Panel which in turn closes the Popover.Panel.
I added this snippet from "Console logging the focused element as it changes" to the reproduction and the Tab.Panel seems to have the focus after clicking in Popover.Panel:
document.addEventListener(
"focusin",
function () {
console.log("focused: ", document.activeElement);
},
true
);
Can anyone provide an explanation of what is happening and suggestions for simple remedies?
I can now answer why specifically this is happening and also provide a possible solution.
I was able to simplify my case a bit. This will happen whenever Popover is inside a focusable element (which Tab.Panel is). I think it's here in the PopoverRoot that whenever the activeElement is outside of the group the panel is closed.
If the Popover is inside an element with tabindex="0" then that element will be the activeElement and the panel will be closed. I updated the codesandbox reproduction to demo this without using Tab and also propose a workaround but I'm not sure if it's an appropriate solution or not.
The workaround appears to be just adding tabIndex="0" to the Popover.Panel so that it is the activeElement. Is there a reason this shouldn't be done or could cause other unexpected behavior?

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.

How to programmatically click a link which use javascript in vb.net

hello all i just so tired from searching all around the internet for a solution for this problem and i have used all the possibilities and it didn't worked
now here is the html code of the link
<li id="jplain" class="">HTML</li>
any help will be appreciated , thanks a lot
I don't know if this is too late to help you but I happened to see it with no solution.
In the following javascript code I have a click even associated with with a button(hdnF5) on the form. So this is the click event for say a button. It will do some things then fire another click
event on another control...perhaps a link or another button.
function FireClickEventFromSomeClickableControl() {
/* other instructions in here
then finally getting to the
last instruction below to
cause a click event on the
control(the one you want the
click event on) to fire.
*/
document.form1.hdnF5.click();
}

Debugging issues : detect where my focus is with jQuery?

Forcing focus() on an element is easy, but after having debug issues, I realize trying to determine where is my focus gone is a lot harder.
The thing is I'm generating a modal window using jq.UI, and from time to time, while focus is supposed to be set on first input of the form included in the modal, cursor just disappears, to never show again unless I reload the page.
Is there a straightforward way to detect where my focus/cursor is?
You can see which element it's on by checking document.activeElement, for example:
alert(document.activeElement.innerHTML); //see the content to aid in IDing it
I'm not sure if the focus event bubbles, but if it does, you could try this:
jQuery('body').focus(function(e){ console.log(e.target); })

jquery desktop blocking input and textarea

I'm trying to modify this: jquery desktop
by adding a input field inside one of the windows. However, I can't type anything into the input. I opened firebug and the classes are flashing when I click the text input so I'm guessing that's what's blocking it. But I don't know how to fix this. Any help is appreciated.
In his very long article, do a page search for 'Cancel mousedown'. You'll see he's canceled any mousedown event that's not a link. That's what you'll have to alter to make it usable. You could either delete the whole thing (the point was to bind a context menu, which he ended up not doing) or add input as an exception like a is.

Categories