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?

Why would you want to prevent the focus? Don't you want your site to be accessible? If it's just about aesthetics, you can use CSS to change the style. — Felix Kling
– Felix Kling, Commented Mar 23, 2016 at 21:11
its almost like I want to change the style of the focusing :/ — Fred Chapman
– Fred Chapman, Commented Mar 24, 2016 at 15:13

Theo · Accepted Answer · 2016-03-23 21:23:02Z

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.

edited Mar 23, 2016 at 21:23

answered Mar 23, 2016 at 21:12

Theo

1,20310 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Fred Chapman Over a year ago

I wanted to be able to not allow the blue focus bordering (on Chrome) when you clicked on a nav item. Because of the spacing, the nav items sit right next to each other and the focus "border" bleeds onto the other nav items

Theo Over a year ago

In that case just add the css which handles the focus.

Felix Kling Over a year ago

@FredChapman: then set outline: none.

Collectives™ on Stack Overflow

React prevent focus on click [duplicate]

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related