React-virtualized: Outline of components

[kirillku]

I have found that all the examples on the react-virtualized website have outline, when it focused. Is it expected behavior?

I am disabling it my project by adding

.ReactVirtualized__Grid {
  outline: none;
}

Should it be disabled in react-virtualized/styles.css the same way or there are more elegant way?

[bvaughn]

This outline is an important accessibility mechanism for keyboard-only users. As such, I feel pretty strongly that it should be enabled by default for focusable elements.

You're free to disable it yourself via a custom className or inline style (eg style={{ outline: 'none' }}). react-virtualized supports both. :)

Related to issues #381, #344

[bgarrett-rt]

For anyone running into this thread confused on the specific fields to set, you can use gridStyle (inline) or gridClassName if you need to use dynamic class names (such as with material-ui's makeStyles, etc).

See: https://github.com/bvaughn/react-virtualized/blob/master/docs/Table.md#prop-types