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

lgarron · Feb 9, 2018 · 8c2e914 · 8c2e914
1 parent a879597
commit 8c2e914
Show file tree

Hide file tree

Showing 2 changed files with 38 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);
@@ -195,6 +194,9 @@ function copyTextUsingDOM(str: string): boolean {
   debugLog("copyTextUsingDOM");
 
   var tempElem = document.createElement("div");
+  // Setting an individual property does not support `!important`, so we set the
+  // whole style instead of just the `-webkit-user-select` property.
+  tempElem.setAttribute("style", "-webkit-user-select: text !important");
   // Use shadow DOM if available.
   var spanParent: Node = tempElem;
   if (tempElem.attachShadow) {

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