-
Notifications
You must be signed in to change notification settings - Fork 45.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
SVG with xlinkHref breaks tab-key focus on Safari 10 #7852
Comments
@dotch thanks for the report! I was able to reproduce this outside of React, so it looks like this is an issue with Safari. var container = document.getElementById('container');
var root = document.createElement('root');
var input1 = document.createElement('input');
var input2 = document.createElement('input');
var svg = document.createElementNS("http://www.w3.org/2000/svg", 'svg');
var use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
use.setAttributeNS( "http://www.w3.org/1999/xlink", "href", "#Icon" );
svg.appendChild(use)
root.appendChild(input1)
root.appendChild(svg)
root.appendChild(input2)
container.appendChild(root) You can verify the issue still occurs here: https://jsfiddle.net/ermtc0tq/3/. I've submitted a bug report to Apple 👍 |
Hi @aweary, thanks for investigating! Can you link us to the bug report so we can keep track of it? ✌️ |
@danburzo I submitted the report through the feedback form which has a bug report category, and they don't let you track the report 😢 I don't personally have a developer account with Apple so I don't have access to https://bugreport.apple.com/, but it might be worth reporting it there too if anyone wants to! |
Thanks so much @sarbbottam! |
FYI
I have updated the bug report. |
Focus will work if put any symbol between |
@rikani good to know that. Thanks! |
It seems to be fixed on safari 10.1, I can't reproduce with @aweary's fiddle |
The fix suggested by @rikani worked for me. Also note that prepending a symbol before the |
Do you want to request a feature or report a bug?
Bug report
What is the current behavior?
On Safari 10:
Given a document with 2
input
fields, separated by ansvg
that uses axlinkHref
, when focusing the first and pressing the tab key, the focus is not switched to the second input. Instead the address bar or another browser element gets focused.I am not sure if this is an issue with React or with Safari, but I could not reproduce it on Safari without using React, so I am opening this issue here.
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem
https://jsfiddle.net/zete1of2/
Try to use the tab key to jump from the first to the second input field.
What is the expected behavior?
Pressing the tab key sets focus on the second input field (works fine on other browsers)
Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
Safari Version 10.0 (11602.1.50.0.10)
OSX 10.11.6
React 15.3.2
The text was updated successfully, but these errors were encountered: