Explicitly set -webkit-user-select: text on temp elem. Fixes #75.

lgarron · Feb 9, 2018 · e2b61c2 · e2b61c2
1 parent 43567bc
commit e2b61c2
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 2 deletions.
diff --git a/clipboard-polyfill.ts b/clipboard-polyfill.ts
@@ -167,8 +167,7 @@ function execCopy(data: DT): FallbackTracker {
   return tracker;
 }
 
-// Create a temporary DOM element to select, so that `execCommand()` is not
-// rejected.
+// Temporarily select a DOM element, so that `execCommand()` is not rejected.
 function copyUsingTempSelection(e: HTMLElement, data: DT): FallbackTracker {
   selectionSet(e);
   var tracker = execCopy(data);
@@ -180,6 +179,7 @@ function copyUsingTempSelection(e: HTMLElement, data: DT): FallbackTracker {
 // rejected.
 function copyUsingTempElem(data: DT): FallbackTracker {
   var tempElem = document.createElement("div");
+  tempElem.style.webkitUserSelect = "text";
   // Place some text in the elem so that Safari has something to select.
   tempElem.textContent = "temporary element";
   document.body.appendChild(tempElem);

diff --git a/test/manual/safari-user-select.html b/test/manual/safari-user-select.html
@@ -0,0 +1,32 @@
+<html>
+<head>
+  <script src="../../build/clipboard-polyfill.js"></script>
+  <style>
+    .unselectable {
+      -webkit-user-select: none;
+    }
+  </style>
+</head>
+<body>
+<script>
+function reportResult(text) {
+  document.querySelector("#result").textContent = text;
+}
+function test() {
+  try {
+    clipboard.writeText("Safari user select test").then(
+      reportResult.bind(this, "PASS"),
+      reportResult.bind(this, "FAIL (after promise)"),
+    );
+  } catch (e) {
+    reportResult("FAIL (outside promise): " + e);
+  }
+}
+</script>
+Platform: iOS Safari
+<div class="unselectable">
+  <button onclick="test()">Test</button>
+</div>
+<div id="result">Result</div>
+</body>
+</html>