Clicking on Links and Buttons shows focus outline

0
votes

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.

enter image description here

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.

2
javascriptjqueryhtmlcssfocus
Please share your code and try to make a jsfiddle.net example. Right now, I have no idea what you're talking about. Also, "can't post images" != "can't post links to images". - Madara's Ghost
if you have existing project then its possible that its happen with CSS or Any JS file , you need to find that Class which make your link or button hilight. and then check in solution , i am sure you will get it. - Abhijit Pandya
@SecondRikudo as I mentioned in my question, if I try to replicate this using some new code, the issue doesn't happen since its not a default behavior, hence jsfiddle won't help, unfortunately. The application code is too huge to share and if I knew what code is causing this I would have fixed it by now. Would you know if there is any way an element would retain the focus after clicking since by default the focus should go to body after any link is clicked. Please correct me if am wrong. - Vidhu
@AbhijitPandya as I mentioned in my question I do not see anywhere this being done using JS or CSS. Would you know if there is any way an element would retain the focus after clicking since by default the focus should go to body after any link is clicked. Please correct me if am wrong. - Vidhu
@Vidhu reproducing in sterile environments is one of the most basic forms of debugging. If you can't do that one yourself, I doubt anyone here can seriously help you beyond guesswork. - Madara's Ghost

2 Answers

0
votes

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..

-1
votes

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