react-feather
react-feather copied to clipboard
Set focusable="false" to avoid focus on icons in IE11
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
focusable="false" tabindex="0" is recommended for backwards compatibility.