search

feathericons / react-feather

React component for Feather icons
https://npm.im/react-feather
MIT License
1.92k stars 126 forks source link

Set focusable="false" to avoid focus on icons in IE11 #23

Open ghengeveld opened 5 years ago

ghengeveld commented 5 years ago

Similar to this issue SVGs in IE11 are focusable by default (using the tab key). Since I'm using react-feather icons alongside form fields for validation, this makes navigating the form using the tab key quite tedious in IE11.

The fix: add focusable="false" to all svg elements.

See also: https://stackoverflow.com/questions/18646111/disable-onfocus-event-for-svg-element

DanielRuf commented 4 years ago

focusable="false" tabindex="0" is recommended for backwards compatibility.