<svg tabIndex="2"> doesn't work

[gaearon]

See the original report in #10772 (comment).

The problem is that SVG is case sensitive, and so naïvely setting tabIndex and relying on insensitivity won't work with it.

The good news is it seems like tabindex is the only valid SVG attribute with this problem. We just missed it because it applies both to HTML and SVG.

I think the fix is to add it back to the whitelist.

[forWorkAtML]

simple example where tabbing works & doesn't work depending on case

https://github.com/forWorkAtML/svg-bug

Note that the console does not state the error did you mean tabindex not being tabIndex
Not really sure why this is but it does display in our app.

[waterizzet]

Thanks for confirming this issue, I've been struggling to identify the reason my svg component stopped working after the update.

A component made of clickable have lost both focus and blur functionality, because "tabIndex" is rendered in the camelCase style and then ignored by the browser.

I've tried adding the property "tabindex" to the tag in the jsx, but it was swallow by React and not rendered to the final component.

[gaearon]

React 16.1.0-beta has been released. Please update react, react-dom, and react-test-renderer (if you use it) to this version and let us know if it solved the issue! We’d appreciate if you could test before Monday when we plan to get 16.1.0 out.

[forWorkAtML]

apologies just seeing this message now.
Yes. The issue is resolved with the beta, rc & 16.1