@hubsync/esign-web-sdk 6.5.9 → 6.5.10

package/dist/components/verdocs-sign.js

@@ -163,8 +163,9 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
             this.processAuthResponse(response);
             const fillable = this.getSortedFillableFields();
             if (fillable.length > 0) {
+                // Give the document a moment to render, then focus and highlight the first fillable field
                 setTimeout(() => {
-                    this.focusedField = fillable[0].name;
+                    this.focusField(fillable[0]);
                 }, 500);
             }
         }
@@ -527,12 +528,22 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
     }
     focusField(field, scrollInline = 'center') {
         var _a;
-        if (!field)
+        // Clear any previously highlighted field
+        const previousActive = document.querySelector('.verdocs-active-field');
+        if (previousActive) {
+            previousActive.classList.remove('verdocs-active-field');
+        }
+        if (!field) {
+            this.focusedField = '';
             return;
+        }
         const id = getFieldId(field);
         const el = document.getElementById(id);
-        el === null || el === void 0 ? void 0 : el.scrollIntoView({ behavior: 'smooth', block: 'center', inline: scrollInline });
-        (_a = el === null || el === void 0 ? void 0 : el.focusField) === null || _a === void 0 ? void 0 : _a.call(el);
+        if (el) {
+            el.classList.add('verdocs-active-field');
+            el.scrollIntoView({ behavior: 'smooth', block: 'center', inline: scrollInline });
+            (_a = el.focusField) === null || _a === void 0 ? void 0 : _a.call(el);
+        }
         this.focusedField = field.name;
         this.markFieldVisited(field.name);
         this.checkRecipientFields();