Blueprint: Controls unexpectedly show outline borders when focused in Electron

Created on 14 Jul 2018  Â·  3Comments  Â·  Source: palantir/blueprint

Environment

  • __Package version(s)__: 3.0.1
  • __Browser and OS versions__: Electron 3.0.0-beta.2 on Windows 10 Version 1803

Steps to reproduce

import {    Button   } from "@blueprintjs/core" ;
import * as React      from "react"             ;
import * as ReactDOM   from "react-dom"         ;

// tslint:disable:no-import-side-effect
import "normalize.css/normalize.css";

import "@blueprintjs/core/lib/css/blueprint.css"          ;
import "@blueprintjs/icons/lib/css/blueprint-icons.css"   ;
import "@blueprintjs/select/lib/css/blueprint-select.css" ;
// tslint:enable:no-import-side-effect

/**
 * Electron renderer process entry point.
 */
ReactDOM.render(
    <Button text="Foo" />,
    document.getElementById("app")
);

Actual behavior

Buttons and (most notably) tabs have a blue outline when focused after clicking that isn't display in the documentation. This most likely points to Electron causing these issues.

Gif

Expected behavior

No blue focus outline at all.

Possible solution

In the hopes to not break any of your CSS I had to add the following rule to prevent the outline entirely (since it isn't necessary in an Electron context with a desktop look and feel):

input, button, textarea, :focus {
    outline: none;
}
not a bug

Most helpful comment

@NearAutomata this is actually completely expected: you have not yet enabled the focus manager.
http://blueprintjs.com/docs/#core/accessibility.focus-management

All 3 comments

@NearAutomata this is actually completely expected: you have not yet enabled the focus manager.
http://blueprintjs.com/docs/#core/accessibility.focus-management

@giladgray Ah didn't know that, but since I host inside of Electron I want to prevent tabbing and focus indicators on tabs as well, so I'll stick to my hardcoded removal of outlines for now. But thanks for the clarification.

On the note of this I'd like to drop a feature request: a method in FocusStyleManager which disables outlines entirely akin to my custom CSS would be useful.

I super strongly disagree with disabling focus styles entirely. They're
very useful and the tab-only behavior is as close to ideal as it gets: no
focus states for mouse users and happy focusing for keyboardists.

I encourage you to reconsider.

On Sun, Jul 15, 2018, 12:45 PM Nate River notifications@github.com wrote:

Closed #2691 https://github.com/palantir/blueprint/issues/2691.

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/palantir/blueprint/issues/2691#event-1734184069, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAcXtmIx4fUA6lWncbGylZUVea_Y3Kolks5uGytLgaJpZM4VPojv
.

Was this page helpful?
0 / 5 - 0 ratings