[Annotations] Draw readonly annotations on their own canvas and show the HTML elements when there is a JS interaction (issue #16384)

src/core/annotation.js

@@ -1695,7 +1695,8 @@ class WidgetAnnotation extends Annotation {
     if (
       renderForms &&
       !(this instanceof SignatureWidgetAnnotation) &&
-      !this.data.noHTML
+      !this.data.noHTML &&
+      !this.data.hasOwnCanvas
     ) {
       return {
         opList: new OperatorList(),
@@ -2425,6 +2426,7 @@ class TextWidgetAnnotation extends WidgetAnnotation {
   constructor(params) {
     super(params);
 
+    this.data.hasOwnCanvas = this.data.readOnly && !this.data.noHTML;
     this._hasText = true;
 
     const dict = params.dict;

src/display/annotation_layer.js

@@ -889,6 +889,15 @@ class WidgetAnnotationElement extends AnnotationElement {
     return this.container;
   }
 
+  showElementAndHideCanvas(element) {
+    if (this.data.hasOwnCanvas) {
+      if (element.previousSibling?.nodeName === "CANVAS") {
+        element.previousSibling.hidden = true;
+      }
+      element.hidden = false;
+    }
+  }
+
   _getKeyModifier(event) {
     const { isWin, isMac } = FeatureTest.platform;
     return (isWin && event.ctrlKey) || (isMac && event.metaKey);
@@ -1069,6 +1078,9 @@ class TextWidgetAnnotationElement extends WidgetAnnotationElement {
           element.style.overflowX = "hidden";
         }
       }
+      if (this.data.hasOwnCanvas) {
+        element.hidden = true;
+      }
       GetElementsByNameSet.add(element);
       element.setAttribute("data-element-id", id);
 
@@ -1118,6 +1130,7 @@ class TextWidgetAnnotationElement extends WidgetAnnotationElement {
         });
 
         element.addEventListener("updatefromsandbox", jsEvent => {
+          this.showElementAndHideCanvas(jsEvent.target);
           const actions = {
             value(event) {
               elementData.userValue = event.detail.value ?? "";

test/pdfs/issue16384.pdf.link

@@ -0,0 +1,2 @@
+https://github.com/mozilla/pdf.js/files/11396519/2.2.2.2.pdf
+

test/test_manifest.json

@@ -7542,5 +7542,14 @@
       },
       "annotations": true,
       "type": "eq"
+   },
+   {
+      "id": "issue16384",
+      "file": "pdfs/issue16384.pdf",
+      "md5": "2a4695a9ce6243832a06e989f1dc6599",
+      "rounds": 1,
+      "link": true,
+      "forms": true,
+      "type": "eq"
    }
 ]