How do I hide the border around Blueprint.js switch component?

Question

The switch component Blueprint (demo and documentation here) displays no border when selected/unselected. I included this component in a React component as follows:

import {Component} from "react";
import {Switch} from "@blueprintjs/core";
import React from "react";

class BPrintMain extends Component{

    render(){
        return (
            <Switch id="switch-input-3" label="Public"  disabled={false} />
        )
    }
}

export {BPrintMain};

When I click the switch component, it displays a border as follows:

The border remains until the focus is lost, that is, I click on something else on the page.

I am including the Blueprint css files from the css of my main componeent as follows:

@import "~@blueprintjs/core/lib/css/blueprint.css";
@import "~normalize.css";
@import "~@blueprintjs/icons/lib/css/blueprint-icons.css";

The css appears to be working for buttons, input controls etc. What am I missing? Why is the switch displaying that focus/bounding box on focus?

Answer 1

Ok, I found the answer. Leaving it here in case someone else gets bitten by this and uses my choice of words for expressing the problem.

As explained in this github issue this is expected behaviour of browsers: display the element with focus. As the answer in the issue says, simply adding the following two lines to your app (I did it in index.js, the root of my React app) solves the problem:

import { FocusStyleManager } from "@blueprintjs/core";
FocusStyleManager.onlyShowFocusOnTabs();