JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://zeroclipboard.org/javascripts/zc/v2.1.1/ZeroClipboard.js"></script>
A common user interaction after copying a URL to the clipboard is to open a tab and paste the URL into the address bar.
I do this by following this key sequence:
<ol>
<li>CTRL + L</li>
<li>CTRL + V</li>
<li>ENTER</li>
</ol>
When using an image as the target element, focus does not return after the copy to clipboard has completed. I have to gain focus by clicking the mouse again in order to use the keyboard.
<p>
I don't know if I'm expecting the right behavior from ZeroClipboard.blur(), but it does not seem to help here.</p>
<p><a href="https://github.com/zeroclipboard/zeroclipboard/issues/462" target="_blank">ZeroClipboard Issue #426</a>
<hr>
<p><strong>Instructions:</strong> <ol><li>Click on the image or the text</li><li>Attempt to use ⌘+L afterwards (CTRL+L on Windows)</li></ol></p>
<hr>
<a href="#" id="clipboard-img" data-clipboard-text="http://www.google.com">
<img src="http://cganomaly.com/imgs/github.png" width="48px" height="48px"/>
Click the image
</a>
<a href="#" id="clipboard-anchor" data-clipboard-text="http://www.google.com" style="display: inline-block; margin-left: 40px;">Click on the text</a>
<div style="margin-top: 50px">
Copied to clipboard:
<div id="output" style="display: inline-block"></div>
</div>
<div style="margin-top: 25px">
Focus on flash bridge:
<div id="focus" style="display: inline-block"></div>
</div>
<div style="margin-top: 10px; padding-left: 30px;">
after calling blur:
<div id="focus-after-blur" style="display: inline-block"></div>
</div>
JavaScript
var output = document.getElementById("output");
var focus = document.getElementById("focus");
var focusAfterBlur = document.getElementById("focus-after-blur");
new ZeroClipboard(document.getElementById("clipboard-img"));
new ZeroClipboard(document.getElementById("clipboard-anchor"));
ZeroClipboard.on("aftercopy", function(e) {
output.innerHTML = e.data["text/plain"];
focus.innerHTML = document.activeElement.id === "global-zeroclipboard-flash-bridge";
ZeroClipboard.blur();
focusAfterBlur.innerHTML = document.activeElement.id === "global-zeroclipboard-flash-bridge";
});