tabIndex для текстового элемента svg не работает в IE11 и Edge при использовании реагирующих компонентов.
Я ожидаю выполнить keypress событие для текстового элемента внутри svg с использованием компонента React.Кажется, что это нормально работает в chrome и FF, но не работает для IE11 и Edge.
По какой-то причине атрибут tabIndex не обрабатывается в IE, если он установлен в jsx реагирования, заставляя текст svg не фокусироваться при нажатии клавиш.
<html>
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<script type="text/babel">
class Greeting extends React.Component {
doSomething() {
alert("Keypress captured");
}
render() {
return (
<div>
<svg viewBox="0 -20 800 300">
<text fill="#273039" fontSize="25" width="150" tabIndex="0" onKeyPress={this.doSomething}>
<tspan>Type something here!</tspan>
</text>
</svg>
</div>
);
}
}
ReactDOM.render(
<Greeting />,
document.getElementById('root')
);
</script>
</html>
Вот пример, который можно попробовать в chrome и IE: https://jsfiddle.net/pabloherre/nou8rc4e
У вас, ребята, есть обходной путь дляэтот?или, кажется, ошибка?