Merge pull request #16387 from calixteman/issue16384

[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 ?? "";