React prevent focus on click [duplicate]

Question

I have a set of tabs on my page that when clicked, switch the active tab to the value of the clicked tab. This works swimmingly, but I am left with a sour taste in my mouth when I look at the new active tab having a big blue focus box around it. Is there a React-y way to prevent this?

Would an onMouseDown={this.someMethod} with a preventDefault() stuck in the method work?

Answer 1

The logics are right but the design is making you problems? In that case some CSS should make it right.

If you have a navbar the CSS should be something like this:

 .navbar-inverse .navbar-brand:focus {
  background-color : red; //Just add the properties you want here
}

If you just right click and inspect the element the browser should tell you exactly about what CSS handles the focus on the tab.