client/server mismatch for text inside of an a/button causes the the a/button to focus on page load

[brucewpaul]

Do you want to request a feature or report a bug?
bug

What is the current behavior?
If there is a client/server mismatch for text inside of an a or button element, it causes it to be automatically focused on page load.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template for React 16: https://jsfiddle.net/Luktwrdm/, template for React 15: https://jsfiddle.net/hmbg7e9w/).

let text;
let URL = '/randomURL';
if (typeof window !== 'undefined') {
  text = 'CLIENT TEXT';
} else {
  text = 'TEXT';
}

return (
  <a href={URL}>
    {text}
  </a>
);

if the focus is not on the window (i.e. if a dom element is selected in the chrome inspector or react inspector widnow), then it doesn't add the focus.

What is the expected behavior?
The expected behavior is that it would either show CLIENT TEXT or TEXT (depending on how React16 resolves the diff), but for it not to be automatically highlighted

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
React16 / macosx / chrome + ff + safari

[brucewpaul]

('m not sure how to add a demo of a client/server mismatch on jsfiddle)

[gaearon]

Maybe you can create a small project locally and share it?

[brucewpaul]

@gaearon https://github.com/brucewpaul/react-test-project

[brucewpaul]

[aweary]

('m not sure how to add a demo of a client/server mismatch on jsfiddle)

For reference, you can use the UMD build of react-dom/server and then manually inject the markup

Here's an example of that reproducing your issue.