React: SVG with xlinkHref breaks tab-key focus on Safari 10

[dotch]

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 an svg that uses a xlinkHref, 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

[aweary]

@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 👍

[danburzo]

Hi @Aweary, thanks for investigating! Can you link us to the bug report so we can keep track of it? ✌️

[aweary]

@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!

[sarbbottam]

I have reported the bug 28917455 but I don't think I can share the URL. Please find the screenshot of the report like so:

[aweary]

Thanks so much @sarbbottam!

[sarbbottam]

FYI

xlink:href is deprecated and one should use href. However, the issue exist with href too.

I have updated the bug report.

[rikani]

Focus will work if put any symbol between </use> and </svg>.
Examples:
<svg><use xlink:href="#icon" /><!-- comment --></svg>
<svg><use xlink:href="#icon" /> </svg>
<svg><use xlink:href="#icon" />😊</svg>

[sarbbottam]

@rikani good to know that. Thanks!

[Meroje]

It seems to be fixed on safari 10.1, I can't reproduce with @aweary's fiddle

[mmgucci]

The fix suggested by @rikani worked for me. Also note that prepending a symbol before the <use> will also enable navigating backwards using tab
<svg> <use xlink:href="#icon" /> </svg>