@unvired/turboforms-embed-sdk 1.0.20 → 1.0.22

package/dist/unvired-form-sdk.html

@@ -513,12 +513,16 @@ body {
   box-sizing: border-box;
   background-color: #f5f5f5;
   font-family: Arial, sans-serif;
+  overflow: hidden; /* Prevent window from scrolling */
 }
 
 .formio-wrapper {
   border: 1px solid #ccc;
   background-color: #fff;
   border-radius: 8px;
+  overflow-y: auto; /* Enable internal scrolling */
+  -webkit-overflow-scrolling: touch;
+  height: 100%; /* Fill space */
 }
 
 #progressContainer {
@@ -1077,6 +1081,41 @@ body {
     margin-right: auto;
 
   }
+
+  /* Prevent iOS zoom/jump on Select search input by ensuring font-size is 16px */
+  .ui.form .choices[data-type*='select-one'] input.choices__input {
+    font-size: 16px !important;
+  }
+
+  /* Add buffer at bottom to allow last components to scroll above the keyboard */
+  #formio-wrapper {
+    padding-bottom: 800px !important;
+  }
+
+  /* Logically add space below the select when opened to allow scrolling the last row higher */
+  .choices.is-open {
+    margin-bottom: 800px !important;
+    overflow: visible !important;
+  }
+
+  /* Prevent dropdown from being layered behind table headers or other rows */
+  .choices__list--dropdown {
+    z-index: 10000 !important;
+    overflow-y: auto !important;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /* Ensure the internal list doesn't have its own scrollbar/max-height that clips items */
+  .choices__list--dropdown .choices__list {
+    max-height: none !important;
+    overflow: visible !important;
+    padding-bottom: 20px !important;
+  }
+
+  /* Add extra space for the last item to ensure it's not clipped on iOS */
+  .choices__list--dropdown .choices__item:last-child {
+    padding-bottom: 20px !important;
+  }
 }</style>
     <style>.r6o-drawing{cursor:none}.r6o-relations-layer.readonly .handle rect{pointer-events:none}.r6o-relations-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.r6o-relations-layer circle{stroke:#515151;stroke-width:.4;fill:#3f3f3f}.r6o-relations-layer path{stroke:#595959;stroke-linecap:round;stroke-linejoin:round;fill:transparent}.r6o-relations-layer path.connection{stroke-width:1.6;stroke-dasharray:2,3}.r6o-relations-layer path.r6o-arrow{stroke-width:1.8;fill:#7f7f7f}.r6o-relations-layer .handle rect{stroke-width:1;stroke:#595959;fill:#fff;pointer-events:auto;cursor:pointer}.r6o-relations-layer .handle text{font-size:10px}.r6o-relations-layer .hover{stroke:rgba(63,63,63,.9);stroke-width:1.4;fill:transparent}
 .r6o-btn{background-color:#4483c4;border:1px solid #4483c4;box-sizing:border-box;color:#fff;cursor:pointer;display:inline-block;font-size:14px;margin:0;outline:none;text-decoration:none;white-space:nowrap;padding:6px 18px;min-width:70px;vertical-align:middle;-webkit-border-radius:2px;-khtml-border-radius:2px;-moz-border-radius:2px;border-radius:2px}.r6o-btn *{vertical-align:middle;cursor:pointer}.r6o-btn .r6o-icon{margin-right:4px}.r6o-btn:disabled{border-color:#a3c2e2 !important;background-color:#a3c2e2 !important}.r6o-btn:hover{background-color:#4f92d7;border-color:#4f92d7}.r6o-btn.outline{border:1px solid #4483c4;color:#4483c4;background-color:transparent;text-shadow:none}.r6o-autocomplete{display:inline;position:relative}.r6o-autocomplete div[role=combobox]{display:inline}.r6o-autocomplete input{outline:none;border:none;width:80px;height:100%;line-height:14px;white-space:pre;box-sizing:border-box;background-color:transparent;font-size:14px;color:#3f3f3f}.r6o-autocomplete ul{position:absolute;margin:0;padding:0;list-style-type:none;background-color:#fff;border-radius:3px;border:1px solid #d6d7d9;box-sizing:border-box;box-shadow:0 0 20px rgba(0,0,0,.25)}.r6o-autocomplete ul:empty{display:none}.r6o-autocomplete li{box-sizing:border-box;padding:2px 12px;width:100%;cursor:pointer}.r6o-editable-text{max-height:120px;overflow:auto;outline:none;min-height:2em;font-size:14px;font-family:"Lato",sans-serif}.r6o-editable-text:empty:not(:focus):before{content:attr(data-placeholder);color:#c2c2c2}.r6o-widget.comment{font-size:14px;min-height:3em;background-color:#fff;position:relative}.r6o-widget.comment .r6o-editable-text,.r6o-widget.comment .r6o-readonly-comment{padding:10px;width:100%;box-sizing:border-box;outline:none;border:none;background-color:transparent;resize:none}.r6o-widget.comment .r6o-readonly-comment{white-space:pre}.r6o-widget.comment .r6o-editable-text::-webkit-input-placeholder{color:#c2c2c2}.r6o-widget.comment .r6o-editable-text::-moz-placeholder{color:#c2c2c2}.r6o-widget.comment .r6o-editable-text:-moz-placeholder{color:#c2c2c2}.r6o-widget.comment .r6o-editable-text:-ms-input-placeholder{color:#c2c2c2}.r6o-widget.comment .r6o-lastmodified{border:1px solid #e5e5e5;display:inline-block;border-radius:2px;margin:0 10px 8px 10px;padding:4px 5px;line-height:100%;font-size:12px}.r6o-widget.comment .r6o-lastmodified .r6o-lastmodified-at{color:#757575;padding-left:3px}.r6o-widget.comment .r6o-arrow-down{position:absolute;height:20px;width:20px;top:9px;right:9px;line-height:22px;background-color:#fff;text-align:center;-webkit-font-smoothing:antialiased;border:1px solid #e5e5e5;cursor:pointer;-webkit-border-radius:1px;-khtml-border-radius:1px;-moz-border-radius:1px;border-radius:1px}.r6o-widget.comment .r6o-arrow-down.r6o-menu-open{border-color:#4483c4}.r6o-widget.comment .r6o-comment-dropdown-menu{position:absolute;top:32px;right:8px;background-color:#fff;border:1px solid #e5e5e5;list-style-type:none;margin:0;padding:5px 0;z-index:9999;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.2);-moz-box-shadow:0 2px 4px rgba(0,0,0,.2);box-shadow:0 2px 4px rgba(0,0,0,.2)}.r6o-widget.comment .r6o-comment-dropdown-menu li{padding:0 15px;cursor:pointer}.r6o-widget.comment .r6o-comment-dropdown-menu li:hover{background-color:#ecf0f1}.r6o-widget.comment .r6o-purposedropdown{position:relative;z-index:2}.r6o-widget.comment.editable{background-color:#ecf0f1}.r6o-widget.r6o-tag:empty{display:none}@media all and (-ms-high-contrast: none),(-ms-high-contrast: active){.r6o-widget.tag .r6o-taglist li{height:27px}.r6o-widget.tag .r6o-taglist li .r6o-delete-wrapper .r6o-delete{position:relative;top:-4px}}.r6o-widget.r6o-tag{background-color:#ecf0f1;border-bottom:1px solid #e5e5e5;padding:1px 3px;display:flex}.r6o-widget.r6o-tag ul{margin:0;padding:0;list-style-type:none;z-index:1}.r6o-widget.r6o-tag ul.r6o-taglist{flex:0;white-space:nowrap}.r6o-widget.r6o-tag ul.r6o-taglist li{margin:0;display:inline-block;margin:1px 1px 1px 0;padding:0;vertical-align:middle;overflow:hidden;font-size:12px;background-color:#fff;border:1px solid #d6d7d9;cursor:pointer;position:relative;line-height:180%;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-border-radius:2px;-khtml-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-box-shadow:0 0 4px rgba(0,0,0,.1);-moz-box-shadow:0 0 4px rgba(0,0,0,.1);box-shadow:0 0 4px rgba(0,0,0,.1)}.r6o-widget.r6o-tag ul.r6o-taglist li .r6o-label{padding:2px 8px;display:inline-block}.r6o-widget.r6o-tag ul.r6o-taglist li .r6o-delete-wrapper{display:inline-block;padding:2px 0;color:#fff;width:0;height:100%;background-color:#4483c4;-webkit-border-top-right-radius:2px;-webkit-border-bottom-right-radius:2px;-khtml-border-radius-topright:2px;-khtml-border-radius-bottomright:2px;-moz-border-radius-topright:2px;-moz-border-radius-bottomright:2px;border-top-right-radius:2px;border-bottom-right-radius:2px}.r6o-widget.r6o-tag ul.r6o-taglist li .r6o-delete-wrapper .r6o-delete{padding:2px 6px}.r6o-widget.r6o-tag ul.r6o-taglist li .r6o-delete-wrapper svg{vertical-align:text-top}.r6o-widget.r6o-tag ul.r6o-taglist li .r6o-delete-enter-active{width:24px;transition:width 200ms}.r6o-widget.r6o-tag ul.r6o-taglist li .r6o-delete-enter-done{width:24px}.r6o-widget.r6o-tag ul.r6o-taglist li .r6o-delete-exit{width:24px}.r6o-widget.r6o-tag ul.r6o-taglist li .r6o-delete-exit-active{width:0;transition:width 200ms}.r6o-widget.r6o-tag .r6o-autocomplete{flex:1;position:relative}.r6o-widget.r6o-tag .r6o-autocomplete li{font-size:14px}.r6o-widget.r6o-tag input{width:100%;padding:0 3px;min-width:80px;outline:none;border:none;line-height:170%;background-color:transparent;color:#3f3f3f}.r6o-widget.r6o-tag input::-webkit-input-placeholder{color:#c2c2c2}.r6o-widget.r6o-tag input::-moz-placeholder{color:#c2c2c2}.r6o-widget.r6o-tag input:-moz-placeholder{color:#c2c2c2}.r6o-widget.r6o-tag input:-ms-input-placeholder{color:#c2c2c2}.r6o-editor{position:absolute;z-index:99999;width:400px;color:#3f3f3f;opacity:0;font-family:"Lato",sans-serif;font-size:17px;line-height:27px;-webkit-transition:opacity .2s ease-in;-moz-transition:opacity .2s ease-in;transition:opacity .2s ease-in}.r6o-editor .r6o-arrow{position:absolute;overflow:hidden;top:-12px;left:12px;width:28px;height:12px;display:none}.r6o-editor .r6o-arrow:after{content:"";position:absolute;top:5px;left:5px;width:18px;height:18px;background-color:#fff;-webkit-backface-visibility:hidden;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}.r6o-editor .r6o-editor-inner{background-color:#fff;-webkit-border-radius:2px;-khtml-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-box-shadow:2px 2px 42px rgba(0,0,0,.4);-moz-box-shadow:2px 2px 42px rgba(0,0,0,.4);box-shadow:2px 2px 42px rgba(0,0,0,.4)}.r6o-editor .r6o-editor-inner .r6o-widget:first-child{-webkit-border-top-left-radius:2px;-webkit-border-top-right-radius:2px;-khtml-border-radius-topleft:2px;-khtml-border-radius-topright:2px;-moz-border-radius-topleft:2px;-moz-border-radius-topright:2px;border-top-left-radius:2px;border-top-right-radius:2px}.r6o-editor .r6o-editor-inner .r6o-widget{border-bottom:1px solid #e5e5e5}.r6o-editor .r6o-footer{position:relative;text-align:right;padding:8px 0}.r6o-editor .r6o-footer .r6o-btn{margin-right:8px}.r6o-editor .r6o-footer .r6o-btn.delete-annotation{position:absolute;top:7px;left:7px;background-color:transparent;border:none;color:#4483c4;width:32px;height:32px;min-width:0;border-radius:100%;padding:0;display:flex;justify-content:center;align-items:center;-webkit-transition:all .1s ease-in;-moz-transition:all .1s ease-in;-o-transition:all .1s ease-in;transition:all .1s ease-in}.r6o-editor .r6o-footer .r6o-btn.delete-annotation:hover{color:#fff;background-color:#ef352c}@media(max-width: 640px){.r6o-editor{width:260px}}.r6o-editor.r6o-arrow-top .r6o-arrow{display:block}.r6o-editor.r6o-arrow-right{margin-left:8px}.r6o-editor.r6o-arrow-right .r6o-arrow{left:auto;right:12px}.r6o-editor.r6o-arrow-bottom .r6o-arrow{display:block;top:auto;bottom:-12px}.r6o-editor.r6o-arrow-bottom .r6o-arrow::after{top:-11px;box-shadow:none}.r6o-editor.pushed .r6o-arrow,.r6o-editor.dragged .r6o-arrow{display:none}.r6o-editor .r6o-draggable{cursor:move}.r6o-purposedropdown{width:150px;display:inline-block}.r6o-noselect{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.r6o-editor{margin-left:-12px}.r6o-annotation{background-color:rgba(255,165,0,.2);border-bottom:2px solid orange;cursor:pointer}.r6o-selection{background-color:rgba(207,207,255,.63);cursor:pointer}.r6o-hide-selection::selection,.r6o-hide-selection ::selection{background:transparent}.r6o-hide-selection::-moz-selection .r6o-hide-selection ::-moz-selection{background:transparent}.r6o-relation-editor{position:absolute;font-family:"Lato",sans-serif;font-size:17px;line-height:27px;-webkit-box-shadow:0 1px 14px rgba(0,0,0,.4);-moz-box-shadow:0 1px 14px rgba(0,0,0,.4);box-shadow:0 1px 14px rgba(0,0,0,.4);-webkit-border-radius:3px;-khtml-border-radius:3px;-moz-border-radius:3px;border-radius:3px;transform:translate(-50%, -50%);background-color:#fff}.r6o-relation-editor svg{vertical-align:middle;shape-rendering:geometricPrecision}.r6o-relation-editor *{box-sizing:border-box}.r6o-relation-editor .input-wrapper{height:34px;padding:0 6px;margin-right:68px;font-size:14px;background-color:#ecf0f1;cursor:text;-webkit-border-top-left-radius:3px;-webkit-border-bottom-left-radius:3px;-khtml-border-radius-topleft:3px;-khtml-border-radius-bottomleft:3px;-moz-border-radius-topleft:3px;-moz-border-radius-bottomleft:3px;border-top-left-radius:3px;border-bottom-left-radius:3px}.r6o-relation-editor .input-wrapper .r6o-autocomplete ul{position:relative;left:-6px}.r6o-relation-editor .buttons{position:absolute;display:inline-flex;top:0;right:0}.r6o-relation-editor .buttons span{height:34px;display:inline-block;width:34px;text-align:center;font-size:14px;cursor:pointer;padding:1px 0}.r6o-relation-editor .buttons .delete{background-color:#fff;color:#9ca4b1;border-left:1px solid #e5e5e5}.r6o-relation-editor .buttons .delete:hover{background-color:#f6f6f6}.r6o-relation-editor .buttons .ok{background-color:#4483c4;color:#fff;-webkit-border-top-right-radius:3px;-webkit-border-bottom-right-radius:3px;-khtml-border-radius-topright:3px;-khtml-border-radius-bottomright:3px;-moz-border-radius-topright:3px;-moz-border-radius-bottomright:3px;border-top-right-radius:3px;border-bottom-right-radius:3px}.r6o-relation-editor .buttons .ok:hover{background-color:#4f92d7}
@@ -40562,12 +40601,16 @@ body {
   box-sizing: border-box;
   background-color: #f5f5f5;
   font-family: Arial, sans-serif;
+  overflow: hidden; /* Prevent window from scrolling */
 }
 
 .formio-wrapper {
   border: 1px solid #ccc;
   background-color: #fff;
   border-radius: 8px;
+  overflow-y: auto; /* Enable internal scrolling */
+  -webkit-overflow-scrolling: touch;
+  height: 100%; /* Fill space */
 }
 
 #progressContainer {
@@ -41126,6 +41169,41 @@ body {
     margin-right: auto;
 
   }
+
+  /* Prevent iOS zoom/jump on Select search input by ensuring font-size is 16px */
+  .ui.form .choices[data-type*='select-one'] input.choices__input {
+    font-size: 16px !important;
+  }
+
+  /* Add buffer at bottom to allow last components to scroll above the keyboard */
+  #formio-wrapper {
+    padding-bottom: 800px !important;
+  }
+
+  /* Logically add space below the select when opened to allow scrolling the last row higher */
+  .choices.is-open {
+    margin-bottom: 800px !important;
+    overflow: visible !important;
+  }
+
+  /* Prevent dropdown from being layered behind table headers or other rows */
+  .choices__list--dropdown {
+    z-index: 10000 !important;
+    overflow-y: auto !important;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /* Ensure the internal list doesn't have its own scrollbar/max-height that clips items */
+  .choices__list--dropdown .choices__list {
+    max-height: none !important;
+    overflow: visible !important;
+    padding-bottom: 20px !important;
+  }
+
+  /* Add extra space for the last item to ensure it's not clipped on iOS */
+  .choices__list--dropdown .choices__item:last-child {
+    padding-bottom: 20px !important;
+  }
 }</style>
 
     <script>
@@ -47031,9 +47109,9 @@ var Choices = /** @class */function () {
     requestAnimationFrame(function () {
       _this.dropdown.show();
       _this.containerOuter.open(_this.dropdown.distanceFromTopWindow);
-      if (!preventInputFocus && _this._canSearch) {
-        _this.input.focus();
-      }
+        if (!preventInputFocus && _this._canSearch) {
+          _this.input.focus({ preventScroll: true });
+        }
       _this.passedElement.triggerEvent(constants_1.EVENTS.showDropdown, {});
     });
     return this;
@@ -47515,7 +47593,7 @@ var Choices = /** @class */function () {
     });
     // Focus input as without focus, a user cannot do anything with a
     // highlighted item
-    this.input.focus();
+    this.input.focus({ preventScroll: true });
   };
   Choices.prototype._handleChoiceAction = function (activeItems, element) {
     if (!activeItems || !element) {
@@ -47944,7 +48022,7 @@ var Choices = /** @class */function () {
       var containerWasExactTarget = target === this.containerOuter.element || target === this.containerInner.element;
       if (containerWasExactTarget) {
         if (this._isTextElement) {
-          this.input.focus();
+          this.input.focus({ preventScroll: true });
         } else if (this._isSelectMultipleElement) {
           this.showDropdown();
         }
@@ -48004,11 +48082,12 @@ var Choices = /** @class */function () {
       if (!this.dropdown.isActive && !this.containerOuter.isDisabled) {
         if (this._isTextElement) {
           if (document.activeElement !== this.input.element) {
-            this.input.focus();
+            this.input.focus({ preventScroll: true });
           }
         } else {
           this.showDropdown();
-          this.containerOuter.focus();
+          // Always focus container to trigger keyboard close if switching fields
+          this.containerOuter.focus({ preventScroll: true });
         }
       } else if (this._isSelectOneElement && target !== this.input.element && !this.dropdown.element.contains(target)) {
         this.hideDropdown();
@@ -48087,7 +48166,7 @@ var Choices = /** @class */function () {
       // closes the dropdown. To stop this, we refocus our input
       // if we know we are on IE *and* are scrolling.
       this._isScrollingOnIe = false;
-      this.input.element.focus();
+      this.input.element.focus({ preventScroll: true });
     }
   };
   Choices.prototype._onFormReset = function () {
@@ -54570,7 +54649,7 @@ class SmartSelectComponent extends SmartSelectField {
       noChoicesText: this.t('No choices to choose from'),
       searchPlaceholderValue: this.t('Type to search'),
       shouldSort: false,
-      position: (this.component.dropdown || 'auto'),
+      position: this.component.dropdown ? this.component.dropdown : (window.platform && window.platform.iosPlatform ? "bottom" : "auto"),
       searchEnabled: useSearch,
       searchChoices: !this.component.searchField,
       searchFields: _.get(this, 'component.searchFields', ['label']),
@@ -54657,10 +54736,16 @@ class SmartSelectComponent extends SmartSelectField {
       if (this.component.multiple) {
         this.focusableElement = this.choices.input.element;
       } else {
-        this.focusableElement = this.choices.containerInner.element;
+        // On iOS, focus the search input even for single select to ensure keyboard opens and centering logic works
+        if (choicesOptions.searchEnabled && window.platform && window.platform.iosPlatform) {
+          this.focusableElement = this.choices.input.element;
+        } else {
+          this.focusableElement = this.choices.containerInner.element;
+        }
         this.choices.containerOuter.element.setAttribute('tabIndex', '-1');
         if (choicesOptions.searchEnabled) {
-          this.addEventListener(this.choices.containerOuter.element, 'focus', () => this.focusableElement.focus());
+          // Proactively position on mousedown so it's ready before focus happens
+          this.addEventListener(this.choices.containerOuter.element, 'mousedown', () => this.positionDropdown());
         }
       }
       this.addFocusBlurEvents(this.focusableElement);
@@ -54677,6 +54762,12 @@ class SmartSelectComponent extends SmartSelectField {
       }
     }
     if (window && this.choices && this.shouldPositionDropdown) {
+      const wrapper = document.getElementById('formio-wrapper');
+      if (wrapper) {
+        this.addEventListener(wrapper, 'scroll', () => {
+          this.positionDropdown(true);
+        }, false, true);
+      }
       this.addEventListener(window.document, 'scroll', () => {
         this.positionDropdown(true);
       }, false, true);
@@ -54787,26 +54878,97 @@ class SmartSelectComponent extends SmartSelectField {
           dataObj.skip = this.defaultDownloadedResources.length + this.component.limit;
           this.setItems(this.defaultDownloadedResources);
         }
+      });
+
+      this.addEventListener(input, 'hideDropdown', () => {
+        const container = document.getElementById('form-container');
+        const currentScroll = container ? container.scrollTop : 0;
 
         if (this.choices && this.choices.input && this.choices.input.element) {
           this.choices.input.element.value = '';
         }
-        this.updateItems(null, true);
+        // Only update items if it's really necessary (e.g. clearing masterdata search)
+        // Redrawing on hide often causes scroll jumps on iOS
+        if (this.component.dataSrc === 'masterdata') {
+          this.updateItems(null, true);
+        }
+
+        // Restore scroll after hide/blur jump
+        if (container && currentScroll > 0) {
+          // Restore if jumping to top or significant shift, but ignore if we recently clicked another select
+          requestAnimationFrame(() => {
+            if (container.scrollTop === 0 && !window._unv_selecting) {
+              container.scrollTop = currentScroll;
+            }
+          });
+        }
       });
     }
 
+    this.addEventListener(input, 'mousedown', () => {
+      window._unv_selecting = true;
+      // Force full keyboard cycle on iOS to prevent layout "ghosting" from previous field
+      if (window.platform && window.platform.iosPlatform && document.activeElement && (document.activeElement.tagName === 'INPUT' || document.activeElement.classList.contains('choices__input'))) {
+        document.activeElement.blur();
+      }
+      setTimeout(() => { window._unv_selecting = false; }, 500);
+      this.positionDropdown();
+    });
+
     this.addEventListener(input, 'showDropdown', () => {
-      this.update();
+      const container = document.getElementById('form-container');
+      const currentScroll = container ? container.scrollTop : 0;
+
+      if (!this.activated) {
+        this.update();
+      }
       this.positionDropdown();
+
+      // Ensure select is visible above keyboard on iOS
+      if (window.platform && window.platform.iosPlatform) {
+        // We removed native scrollIntoView as it interferes with manual scroll control in focus.js
+        // focus.js handles the centering now.
+      }
+
+      // Restore and lock scroll on iPad to prevent "flicker" shifts during keyboard toggles
+      if (container && currentScroll > 0 && window.platform && window.platform.iosPlatform) {
+        // Immediate restoration
+        container.scrollTop = currentScroll;
+
+        // Follow-up restoration for async layout shifts
+        requestAnimationFrame(() => {
+          container.scrollTop = currentScroll;
+        });
+
+        // Periodical restoration during the typical keyboard transition time (300ms)
+        let count = 0;
+        const interval = setInterval(() => {
+          if (container.scrollTop !== currentScroll) {
+            container.scrollTop = currentScroll;
+          }
+          if (++count > 10) clearInterval(interval);
+        }, 30);
+      } else if (container && currentScroll > 0) {
+        // Standard restoration for other platforms
+        requestAnimationFrame(() => {
+          if (container.scrollTop === 0) {
+            container.scrollTop = currentScroll;
+          }
+        });
+      }
+
       if ((this.component.dataSrc === 'masterdata') && this.component.masterdata) {
         this.component.dropdownOpened = true;
-        if (this.defaultDownloadedResources && ((this.defaultDownloadedResources.length == 1) || ((this.defaultDownloadedResources.length < this.component.limit) && this.component.multiple))) {
-          this.defaultDownloadedResources = [];
-          this.setMasterdata();
-        } else if (this.defaultDownloadedResources && this.defaultDownloadedResources.length > 0) {
-          this.setItems(this.defaultDownloadedResources);
-        } else {
-          this.setMasterdata();
+        // Avoid redundant setItems if we already have the data
+        if (!this.defaultDownloadedResources || this.defaultDownloadedResources.length === 0) {
+          if (this.defaultDownloadedResources && ((this.defaultDownloadedResources.length == 1) || ((this.defaultDownloadedResources.length < this.component.limit) && this.component.multiple))) {
+            this.defaultDownloadedResources = [];
+            this.setMasterdata();
+          } else if (this.defaultDownloadedResources && this.defaultDownloadedResources.length > 0) {
+            this.setItems(this.defaultDownloadedResources);
+          } else {
+            this.setMasterdata();
+          }
         }
       }
     });
@@ -54858,6 +55020,12 @@ class SmartSelectComponent extends SmartSelectField {
     this.disabled = this.shouldDisabled;
     this.updateItems();
     this.triggerUpdate();
+
+    // If not lazy loading, mark as activated to avoid redraw on first open
+    if (!this.component.lazyLoad) {
+      this.activated = true;
+    }
+
     return superAttach;
   }
   setDropdownPosition() {
@@ -54877,14 +55045,29 @@ class SmartSelectComponent extends SmartSelectField {
     const containerPosition = container.getBoundingClientRect();
     const isFlipped = container.classList.contains('is-flipped');
 
-    _.assign(dropdown.style, {
-      top: `${isFlipped ? containerPosition.top - dropdown.offsetHeight : containerPosition.top + containerPosition.height}px`,
+    const vpH = window.visualViewport ? window.visualViewport.height : window.innerHeight;
+    const top = isFlipped ? containerPosition.top - dropdown.offsetHeight : containerPosition.top + containerPosition.height;
+    
+    const style = {
       left: `${containerPosition.left}px`,
       width: `${containerPosition.width}px`,
       position: 'fixed',
       bottom: 'unset',
       right: 'unset',
-    });
+      top: `${top}px`,
+    };
+
+    // On iOS, we limit the max-height of the fixed dropdown to stay within the viewport.
+    // We also use a scroll listener on the wrapper (added in attach()) to ensure this fixed 
+    // element re-positions during scrolling, making it behave like an absolute element.
+    if (window.platform && window.platform.iosPlatform) {
+      // Limit max-height to available space but ensure at least 300px for a good scroll area.
+      // We subtract 30px to leave a small gap at the bottom for better visibility.
+      const availableHeight = isFlipped ? top - 20 : vpH - top - 30;
+      style.maxHeight = `${Math.max(availableHeight, 300)}px`;
+    }
+
+    _.assign(dropdown.style, style);
   }
 
   hasDataGridAncestor(comp) {
@@ -56779,7 +56962,12 @@ class ColumnsComponent extends ColumnsNestedComponent {
       const redraw = this.justify();
 
       if (redraw) {
-        this.redraw();
+        // Avoid redrawing columns if an input is focused to prevent scroll/focus loss
+        const activeEl = document.activeElement;
+        const isFocusable = activeEl && (activeEl.tagName === 'INPUT' || activeEl.tagName === 'TEXTAREA' || activeEl.classList.contains('choices__input'));
+        if (!isFocusable) {
+          this.redraw();
+        }
       }
     }
 
@@ -60499,7 +60687,7 @@ window.CommentOnBack = CommentOnBack;
 
     
     <div id="sticky-footer">
-        <div class="build-version">SDK v1.0.20</div>
+        <div class="build-version">SDK v1.0.22</div>
         <div class="relative-position">
             <button id="unvired-more-btn" class="ui button primary dataGrid-addRow" onclick="toggleTooltip()">
                 <i class="icon options"></i>

package/dist/unvired-forms-sdk.js

@@ -1489,12 +1489,16 @@ body {
   box-sizing: border-box;
   background-color: #f5f5f5;
   font-family: Arial, sans-serif;
+  overflow: hidden; /* Prevent window from scrolling */
 }
 
 .formio-wrapper {
   border: 1px solid #ccc;
   background-color: #fff;
   border-radius: 8px;
+  overflow-y: auto; /* Enable internal scrolling */
+  -webkit-overflow-scrolling: touch;
+  height: 100%; /* Fill space */
 }
 
 #progressContainer {
@@ -2053,6 +2057,41 @@ body {
     margin-right: auto;
 
   }
+
+  /* Prevent iOS zoom/jump on Select search input by ensuring font-size is 16px */
+  .ui.form .choices[data-type*='select-one'] input.choices__input {
+    font-size: 16px !important;
+  }
+
+  /* Add buffer at bottom to allow last components to scroll above the keyboard */
+  #formio-wrapper {
+    padding-bottom: 800px !important;
+  }
+
+  /* Logically add space below the select when opened to allow scrolling the last row higher */
+  .choices.is-open {
+    margin-bottom: 800px !important;
+    overflow: visible !important;
+  }
+
+  /* Prevent dropdown from being layered behind table headers or other rows */
+  .choices__list--dropdown {
+    z-index: 10000 !important;
+    overflow-y: auto !important;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /* Ensure the internal list doesn't have its own scrollbar/max-height that clips items */
+  .choices__list--dropdown .choices__list {
+    max-height: none !important;
+    overflow: visible !important;
+    padding-bottom: 20px !important;
+  }
+
+  /* Add extra space for the last item to ensure it's not clipped on iOS */
+  .choices__list--dropdown .choices__item:last-child {
+    padding-bottom: 20px !important;
+  }
 }
 
 /* === STYLE_SEPARATOR === */
@@ -27883,7 +27922,7 @@ select.ui.dropdown {
       <div id="formio-cmt" style="margin-bottom: 20px;"></div>
     </div>
     <div id="sticky-footer">
-      <div class="build-version">SDK v1.0.20</div>
+      <div class="build-version">SDK v1.0.22</div>
       <button class="ui button primary dataGrid-addRow" id="saveBtn" disabled="true" onclick="FormOnSave()">
         <i class="icon save large"></i>Save
       </button>
@@ -54299,9 +54338,9 @@ var Choices = /** @class */function () {
     requestAnimationFrame(function () {
       _this.dropdown.show();
       _this.containerOuter.open(_this.dropdown.distanceFromTopWindow);
-      if (!preventInputFocus && _this._canSearch) {
-        _this.input.focus();
-      }
+        if (!preventInputFocus && _this._canSearch) {
+          _this.input.focus({ preventScroll: true });
+        }
       _this.passedElement.triggerEvent(constants_1.EVENTS.showDropdown, {});
     });
     return this;
@@ -54783,7 +54822,7 @@ var Choices = /** @class */function () {
     });
     // Focus input as without focus, a user cannot do anything with a
     // highlighted item
-    this.input.focus();
+    this.input.focus({ preventScroll: true });
   };
   Choices.prototype._handleChoiceAction = function (activeItems, element) {
     if (!activeItems || !element) {
@@ -55212,7 +55251,7 @@ var Choices = /** @class */function () {
       var containerWasExactTarget = target === this.containerOuter.element || target === this.containerInner.element;
       if (containerWasExactTarget) {
         if (this._isTextElement) {
-          this.input.focus();
+          this.input.focus({ preventScroll: true });
         } else if (this._isSelectMultipleElement) {
           this.showDropdown();
         }
@@ -55272,11 +55311,12 @@ var Choices = /** @class */function () {
       if (!this.dropdown.isActive && !this.containerOuter.isDisabled) {
         if (this._isTextElement) {
           if (document.activeElement !== this.input.element) {
-            this.input.focus();
+            this.input.focus({ preventScroll: true });
           }
         } else {
           this.showDropdown();
-          this.containerOuter.focus();
+          // Always focus container to trigger keyboard close if switching fields
+          this.containerOuter.focus({ preventScroll: true });
         }
       } else if (this._isSelectOneElement && target !== this.input.element && !this.dropdown.element.contains(target)) {
         this.hideDropdown();
@@ -55355,7 +55395,7 @@ var Choices = /** @class */function () {
       // closes the dropdown. To stop this, we refocus our input
       // if we know we are on IE *and* are scrolling.
       this._isScrollingOnIe = false;
-      this.input.element.focus();
+      this.input.element.focus({ preventScroll: true });
     }
   };
   Choices.prototype._onFormReset = function () {
@@ -61839,7 +61879,7 @@ class SmartSelectComponent extends SmartSelectField {
       noChoicesText: this.t('No choices to choose from'),
       searchPlaceholderValue: this.t('Type to search'),
       shouldSort: false,
-      position: (this.component.dropdown || 'auto'),
+      position: this.component.dropdown ? this.component.dropdown : (window.platform && window.platform.iosPlatform ? "bottom" : "auto"),
       searchEnabled: useSearch,
       searchChoices: !this.component.searchField,
       searchFields: _.get(this, 'component.searchFields', ['label']),
@@ -61926,10 +61966,16 @@ class SmartSelectComponent extends SmartSelectField {
       if (this.component.multiple) {
         this.focusableElement = this.choices.input.element;
       } else {
-        this.focusableElement = this.choices.containerInner.element;
+        // On iOS, focus the search input even for single select to ensure keyboard opens and centering logic works
+        if (choicesOptions.searchEnabled && window.platform && window.platform.iosPlatform) {
+          this.focusableElement = this.choices.input.element;
+        } else {
+          this.focusableElement = this.choices.containerInner.element;
+        }
         this.choices.containerOuter.element.setAttribute('tabIndex', '-1');
         if (choicesOptions.searchEnabled) {
-          this.addEventListener(this.choices.containerOuter.element, 'focus', () => this.focusableElement.focus());
+          // Proactively position on mousedown so it's ready before focus happens
+          this.addEventListener(this.choices.containerOuter.element, 'mousedown', () => this.positionDropdown());
         }
       }
       this.addFocusBlurEvents(this.focusableElement);
@@ -61946,6 +61992,12 @@ class SmartSelectComponent extends SmartSelectField {
       }
     }
     if (window && this.choices && this.shouldPositionDropdown) {
+      const wrapper = document.getElementById('formio-wrapper');
+      if (wrapper) {
+        this.addEventListener(wrapper, 'scroll', () => {
+          this.positionDropdown(true);
+        }, false, true);
+      }
       this.addEventListener(window.document, 'scroll', () => {
         this.positionDropdown(true);
       }, false, true);
@@ -62056,26 +62108,97 @@ class SmartSelectComponent extends SmartSelectField {
           dataObj.skip = this.defaultDownloadedResources.length + this.component.limit;
           this.setItems(this.defaultDownloadedResources);
         }
+      });
+
+      this.addEventListener(input, 'hideDropdown', () => {
+        const container = document.getElementById('form-container');
+        const currentScroll = container ? container.scrollTop : 0;
 
         if (this.choices && this.choices.input && this.choices.input.element) {
           this.choices.input.element.value = '';
         }
-        this.updateItems(null, true);
+        // Only update items if it's really necessary (e.g. clearing masterdata search)
+        // Redrawing on hide often causes scroll jumps on iOS
+        if (this.component.dataSrc === 'masterdata') {
+          this.updateItems(null, true);
+        }
+
+        // Restore scroll after hide/blur jump
+        if (container && currentScroll > 0) {
+          // Restore if jumping to top or significant shift, but ignore if we recently clicked another select
+          requestAnimationFrame(() => {
+            if (container.scrollTop === 0 && !window._unv_selecting) {
+              container.scrollTop = currentScroll;
+            }
+          });
+        }
       });
     }
 
+    this.addEventListener(input, 'mousedown', () => {
+      window._unv_selecting = true;
+      // Force full keyboard cycle on iOS to prevent layout "ghosting" from previous field
+      if (window.platform && window.platform.iosPlatform && document.activeElement && (document.activeElement.tagName === 'INPUT' || document.activeElement.classList.contains('choices__input'))) {
+        document.activeElement.blur();
+      }
+      setTimeout(() => { window._unv_selecting = false; }, 500);
+      this.positionDropdown();
+    });
+
     this.addEventListener(input, 'showDropdown', () => {
-      this.update();
+      const container = document.getElementById('form-container');
+      const currentScroll = container ? container.scrollTop : 0;
+
+      if (!this.activated) {
+        this.update();
+      }
       this.positionDropdown();
+
+      // Ensure select is visible above keyboard on iOS
+      if (window.platform && window.platform.iosPlatform) {
+        // We removed native scrollIntoView as it interferes with manual scroll control in focus.js
+        // focus.js handles the centering now.
+      }
+
+      // Restore and lock scroll on iPad to prevent "flicker" shifts during keyboard toggles
+      if (container && currentScroll > 0 && window.platform && window.platform.iosPlatform) {
+        // Immediate restoration
+        container.scrollTop = currentScroll;
+
+        // Follow-up restoration for async layout shifts
+        requestAnimationFrame(() => {
+          container.scrollTop = currentScroll;
+        });
+
+        // Periodical restoration during the typical keyboard transition time (300ms)
+        let count = 0;
+        const interval = setInterval(() => {
+          if (container.scrollTop !== currentScroll) {
+            container.scrollTop = currentScroll;
+          }
+          if (++count > 10) clearInterval(interval);
+        }, 30);
+      } else if (container && currentScroll > 0) {
+        // Standard restoration for other platforms
+        requestAnimationFrame(() => {
+          if (container.scrollTop === 0) {
+            container.scrollTop = currentScroll;
+          }
+        });
+      }
+
       if ((this.component.dataSrc === 'masterdata') && this.component.masterdata) {
         this.component.dropdownOpened = true;
-        if (this.defaultDownloadedResources && ((this.defaultDownloadedResources.length == 1) || ((this.defaultDownloadedResources.length < this.component.limit) && this.component.multiple))) {
-          this.defaultDownloadedResources = [];
-          this.setMasterdata();
-        } else if (this.defaultDownloadedResources && this.defaultDownloadedResources.length > 0) {
-          this.setItems(this.defaultDownloadedResources);
-        } else {
-          this.setMasterdata();
+        // Avoid redundant setItems if we already have the data
+        if (!this.defaultDownloadedResources || this.defaultDownloadedResources.length === 0) {
+          if (this.defaultDownloadedResources && ((this.defaultDownloadedResources.length == 1) || ((this.defaultDownloadedResources.length < this.component.limit) && this.component.multiple))) {
+            this.defaultDownloadedResources = [];
+            this.setMasterdata();
+          } else if (this.defaultDownloadedResources && this.defaultDownloadedResources.length > 0) {
+            this.setItems(this.defaultDownloadedResources);
+          } else {
+            this.setMasterdata();
+          }
         }
       }
     });
@@ -62127,6 +62250,12 @@ class SmartSelectComponent extends SmartSelectField {
     this.disabled = this.shouldDisabled;
     this.updateItems();
     this.triggerUpdate();
+
+    // If not lazy loading, mark as activated to avoid redraw on first open
+    if (!this.component.lazyLoad) {
+      this.activated = true;
+    }
+
     return superAttach;
   }
   setDropdownPosition() {
@@ -62146,14 +62275,29 @@ class SmartSelectComponent extends SmartSelectField {
     const containerPosition = container.getBoundingClientRect();
     const isFlipped = container.classList.contains('is-flipped');
 
-    _.assign(dropdown.style, {
-      top: \`\${isFlipped ? containerPosition.top - dropdown.offsetHeight : containerPosition.top + containerPosition.height}px\`,
+    const vpH = window.visualViewport ? window.visualViewport.height : window.innerHeight;
+    const top = isFlipped ? containerPosition.top - dropdown.offsetHeight : containerPosition.top + containerPosition.height;
+    
+    const style = {
       left: \`\${containerPosition.left}px\`,
       width: \`\${containerPosition.width}px\`,
       position: 'fixed',
       bottom: 'unset',
       right: 'unset',
-    });
+      top: \`\${top}px\`,
+    };
+
+    // On iOS, we limit the max-height of the fixed dropdown to stay within the viewport.
+    // We also use a scroll listener on the wrapper (added in attach()) to ensure this fixed 
+    // element re-positions during scrolling, making it behave like an absolute element.
+    if (window.platform && window.platform.iosPlatform) {
+      // Limit max-height to available space but ensure at least 300px for a good scroll area.
+      // We subtract 30px to leave a small gap at the bottom for better visibility.
+      const availableHeight = isFlipped ? top - 20 : vpH - top - 30;
+      style.maxHeight = \`\${Math.max(availableHeight, 300)}px\`;
+    }
+
+    _.assign(dropdown.style, style);
   }
 
   hasDataGridAncestor(comp) {
@@ -64053,7 +64197,12 @@ class ColumnsComponent extends ColumnsNestedComponent {
       const redraw = this.justify();
 
       if (redraw) {
-        this.redraw();
+        // Avoid redrawing columns if an input is focused to prevent scroll/focus loss
+        const activeEl = document.activeElement;
+        const isFocusable = activeEl && (activeEl.tagName === 'INPUT' || activeEl.tagName === 'TEXTAREA' || activeEl.classList.contains('choices__input'));
+        if (!isFocusable) {
+          this.redraw();
+        }
       }
     }
 
@@ -66237,6 +66386,161 @@ window.showDynamicModal = showDynamicModal;
 
 // === SCRIPT_SEPARATOR ===
 
+(function(){
+let isKeyboardOpen = false;
+let activeElement = null;
+const INITIAL_WINDOW_HEIGHT = window.innerHeight;
+
+console.log("[Focus] Script initialized. Initial Height:", INITIAL_WINDOW_HEIGHT);
+
+// SOFT LOCK
+window.addEventListener('scroll', () => {
+    if (isKeyboardOpen && Math.abs(window.scrollY) > 20) {
+        window.scrollTo(0, 0);
+    }
+}, { passive: true });
+
+function updateFooterVisibility(keyboardOpen) {
+    // Only hide the footer on iOS to make room for the software keyboard.
+    // On Windows/Desktop, we should keep the footer visible at all times.
+    const isIOS = (window.platform && window.platform.iosPlatform);
+    if (!isIOS) return;
+
+    const footer = document.getElementById('sticky-footer');
+    if (!footer) return;
+    
+    if (keyboardOpen) {
+        footer.style.display = 'none';
+    } else {
+        footer.style.display = 'flex';
+    }
+}
+
+// Track focused input
+document.addEventListener('focusin', (e) => {
+    const el = e.target;
+    if (!el || !['INPUT', 'TEXTAREA', 'SELECT'].includes(el.tagName)) return;
+    
+    console.log("[Focus] \u{1F3AF} focusin on:", el.name || el.id || el.tagName);
+    updateFooterVisibility(true);
+
+    activeElement = el;
+
+    // Special handling for Choices.js: if an input inside choices is focused,
+    // we want to ensure the whole container is considered the active element for centering
+    if (el.classList.contains('choices__input')) {
+        const container = el.closest('.choices');
+        if (container) {
+            activeElement = container;
+            console.log("[Focus] \u{1F4E6} Choices.js detected, centering container.");
+        }
+    }
+
+    if (isKeyboardOpen) {
+        console.log("[Focus] \u26A1 Already open, centering now.");
+        centerActiveElement();
+    }
+});
+
+// Restore footer when focus is lost and keyboard is not open
+document.addEventListener('focusout', (e) => {
+    setTimeout(() => {
+        const currentlyFocused = document.activeElement;
+        const isInputFocused = currentlyFocused && ['INPUT', 'TEXTAREA', 'SELECT'].includes(currentlyFocused.tagName);
+        
+        if (!isInputFocused && !isKeyboardOpen) {
+            console.log("[Focus] \u{1F6AA} focusout and keyboard closed, restoring footer.");
+            updateFooterVisibility(false);
+        }
+    }, 200);
+});
+
+// Detect keyboard open/close
+if (window.visualViewport) {
+    window.visualViewport.addEventListener('resize', () => {
+        const isIOS = (window.platform && window.platform.iosPlatform);
+        if (!isIOS) return;
+
+        const viewport = window.visualViewport;
+        const vpH = viewport.height;
+        const isNowOpen = vpH < INITIAL_WINDOW_HEIGHT - 100; 
+
+        if (isNowOpen) {
+            const wasAlreadyOpen = isKeyboardOpen;
+            isKeyboardOpen = true;
+            updateFooterVisibility(true);
+            
+            if (activeElement && !wasAlreadyOpen) {
+                console.log("[Focus] \u{1F3A2} Keyboard sliding. Following...");
+                startFollowingElement();
+            }
+        } else {
+            isKeyboardOpen = false;
+            updateFooterVisibility(false);
+            window.scrollTo(0, 0); 
+        }
+    });
+}
+
+// Manually follow the element for a short duration to ensure it stays centered during animation
+function startFollowingElement() {
+    let start = Date.now();
+    const duration = 400; // Follow for 400ms (typical iOS keyboard duration)
+
+    function step() {
+        centerActiveElement();
+        if (Date.now() - start < duration) {
+            requestAnimationFrame(step);
+        }
+    }
+    requestAnimationFrame(step);
+}
+
+function centerActiveElement() {
+    if (!activeElement) return;
+    const wrapper = document.getElementById('formio-wrapper');
+    if (!wrapper) return;
+
+    const vpH = window.visualViewport ? window.visualViewport.height : window.innerHeight;
+    
+    // Calculate absolute offset of element relative to wrapper
+    let offsetTop = 0;
+    let curr = activeElement;
+    while (curr && curr !== wrapper && curr !== null) {
+        offsetTop += curr.offsetTop;
+        curr = curr.offsetParent;
+    }
+
+    // For Choices.js, if the dropdown is open, we might want to adjust centering 
+    // to ensure the dropdown is visible. However, centering the container is usually best.
+    const elementHeight = activeElement.offsetHeight;
+
+    // targetScroll = (distance from top) - (half of available space) + (half of element height)
+    const targetScroll = offsetTop - (vpH / 2) + (elementHeight / 2);
+    
+    // Apply instantly but accurately
+    if (Math.abs(wrapper.scrollTop - targetScroll) > 5) {
+        wrapper.scrollTop = targetScroll;
+    }
+}
+
+// Listen for Choices.js events to re-center when dropdown opens/closes
+document.addEventListener('showDropdown', () => {
+    if (isKeyboardOpen) {
+        console.log("[Focus] \u{1F53D} showDropdown detected, re-centering.");
+        setTimeout(centerActiveElement, 100);
+    }
+}, true);
+
+document.addEventListener('hideDropdown', () => {
+    console.log("[Focus] \u{1F53C} hideDropdown detected, resetting view.");
+    // When dropdown hides, we might want to center the closed select again
+    setTimeout(centerActiveElement, 100);
+}, true);
+})();
+
+// === SCRIPT_SEPARATOR ===
+
 (function(){
 var formObj = null;
 var initialFormData = null;
@@ -66578,6 +66882,7 @@ async function loadRNform(
     // Determine form configuration based on mode
     let formConfig = {
       noAlerts: true,
+      scroll: false, // DISABLE Formio internal scrolling
       language: window.FORMIO_LANGUAGE || "en",
       i18n: window.FORMIO_I18N,
     };
@@ -66733,71 +67038,141 @@ async function loadRNform(
     setupOnChange(privateExternal, permission);
 
 
-    formObj.formReady.then(() => {
-      if (formPreviousData) {
-        formObj.submission = {
-          data:
-            typeof formPreviousData === "string"
-              ? JSON.parse(formPreviousData)
-              : formPreviousData,
-        };
-      }
+    formObj.formReady
+      .then(() => {
+        console.log("[FormIO] \u{1F680} formReady.then() triggered");
 
-      // Calculate initial progress immediately
-      console.log("[FormIO] \u{1F4CA} Form ready \u2014 calculating initial progress...");
-      executeProgressCalculation(privateExternal, permission);
+        if (formPreviousData) {
+          console.log("[FormIO] \u{1F4E6} Previous form data found:", formPreviousData);
 
-      // Hide FormIO submit button component and wizard buttons in readOnly mode
-      if (mode == "readOnly") {
-        const submitComponents = document.querySelectorAll(
-          ".formio-component-submit"
-        );
-        submitComponents.forEach((component) => {
-          component.style.display = "none";
-        });
+          formObj.submission = {
+            data:
+              typeof formPreviousData === "string"
+                ? JSON.parse(formPreviousData)
+                : formPreviousData,
+          };
 
-        // Hide wizard navigation buttons
-        const wizardNextBtns = document.querySelectorAll(
-          ".btn-wizard-nav-next"
-        );
-        wizardNextBtns.forEach((btn) => {
-          btn.style.display = "none";
+          console.log("[FormIO] \u2705 Previous submission data applied");
+        } else {
+          console.log("[FormIO] \u2139\uFE0F No previous form data found");
+        }
+
+        // Calculate initial progress immediately
+        console.log("[FormIO] \u{1F4CA} Calculating initial progress...");
+        executeProgressCalculation(privateExternal, permission);
+        console.log("[FormIO] \u2705 Progress calculation completed");
+
+        // Hide FormIO submit button component and wizard buttons in readOnly mode
+        if (mode == "readOnly") {
+          console.log("[FormIO] \u{1F512} ReadOnly mode detected");
+
+          const submitComponents = document.querySelectorAll(
+            ".formio-component-submit"
+          );
+          console.log(
+            \`[FormIO] Found \${submitComponents.length} submit components\`
+          );
+
+          submitComponents.forEach((component, index) => {
+            component.style.display = "none";
+            console.log(\`[FormIO] Hidden submit component \${index + 1}\`);
+          });
+
+          const wizardNextBtns = document.querySelectorAll(
+            ".btn-wizard-nav-next"
+          );
+          console.log(
+            \`[FormIO] Found \${wizardNextBtns.length} wizard next buttons\`
+          );
+
+          wizardNextBtns.forEach((btn, index) => {
+            btn.style.display = "none";
+            console.log(\`[FormIO] Hidden wizard next button \${index + 1}\`);
+          });
+
+          const wizardSubmitBtns = document.querySelectorAll(
+            ".btn-wizard-nav-submit"
+          );
+          console.log(
+            \`[FormIO] Found \${wizardSubmitBtns.length} wizard submit buttons\`
+          );
+
+          wizardSubmitBtns.forEach((btn, index) => {
+            btn.style.display = "none";
+            console.log(\`[FormIO] Hidden wizard submit button \${index + 1}\`);
+          });
+
+          const wizardPrevBtns = document.querySelectorAll(
+            ".btn-wizard-nav-previous"
+          );
+          console.log(
+            \`[FormIO] Found \${wizardPrevBtns.length} wizard previous buttons\`
+          );
+
+          wizardPrevBtns.forEach((btn, index) => {
+            btn.style.display = "none";
+            console.log(\`[FormIO] Hidden wizard previous button \${index + 1}\`);
+          });
+        } else {
+          console.log("[FormIO] \u{1F513} Editable mode detected");
+        }
+
+        console.log("[FormIO] \u{1F4E1} Sending FORM_RENDER callback...");
+        sendEventCallback({
+          type: FORM_EVENTS.FORM_RENDER,
+          message: "Success: Form rendered successfully.",
+          data: {
+            submissionData: formPreviousData,
+            formTemplate: template,
+          },
         });
+        console.log("[FormIO] \u2705 FORM_RENDER callback sent");
+
+        // Hide SDK loader
+        const sdkLoader = document.getElementById("sdk-form-loader");
+
+        if (sdkLoader) {
+          console.log("[FormIO] \u23F3 Loader found, hiding...");
+          sdkLoader.classList.add("hidden");
+          console.log("[FormIO] \u2705 Loader hidden");
+        } else {
+          console.log("[FormIO] \u26A0\uFE0F Loader element not found");
+        }
+
+        // Dispatch custom event
+        console.log("[FormIO] \u{1F4E2} Dispatching FormRenderingComplete event...");
 
-        const wizardSubmitBtns = document.querySelectorAll(
-          ".btn-wizard-nav-submit"
+        document.dispatchEvent(
+          new CustomEvent("FormRenderingComplete", {
+            detail: {
+              timestamp: new Date().toISOString(),
+              status: "success",
+            },
+          })
         );
-        wizardSubmitBtns.forEach((btn) => {
-          btn.style.display = "none";
-        });
 
-        const wizardPrevBtns = document.querySelectorAll(
-          ".btn-wizard-nav-previous"
+        console.log(
+          "[FormIO] \u2705 FormRenderingComplete event dispatched successfully"
         );
-        wizardPrevBtns.forEach((btn) => {
-          btn.style.display = "none";
-        });
-      }
 
-      sendEventCallback({
-        type: FORM_EVENTS.FORM_RENDER,
-        message: "Success: Form rendered successfully.",
-        data: { submissionData: formPreviousData, formTemplate: template },
+        // File input
+        const fileInput = document.querySelector('input[type="file"]');
+
+        if (fileInput) {
+          fileInput.setAttribute("accept", "*/*");
+          console.log("[FormIO] \u{1F4CE} File input found, accept=*/* applied");
+        } else {
+          console.log("[FormIO] \u2139\uFE0F No file input found");
+        }
+
+        console.log("[FormIO] \u{1F389} Full formReady process completed");
+      })
+      .catch((error) => {
+        console.error("[FormIO] \u274C formReady.then() failed:", error);
       });
-      console.log("[FormIO] \u2705 Form rendered successfully \u2014 SDK handover complete");
 
-      // Hide SDK loader when form is ready
-      const sdkLoader = document.getElementById('sdk-form-loader');
-      if (sdkLoader) {
-        sdkLoader.classList.add('hidden');
-      }
 
-      // mark rendered; LessRenderingComplete will also set readiness when styling finishes
 
-      document.dispatchEvent(new CustomEvent("FormRenderingComplete"));
-      const fileInput = document.querySelector('input[type="file"]');
-      if (fileInput) fileInput.setAttribute("accept", "*/*");
-    });
   } catch (error) {
     console.error("\u274C Error creating form (after retries):", error);
 
@@ -67925,7 +68300,7 @@ window.deleteAppDocument = async function(id) {
 window.getAllDocuments = getAllDocuments;
 window.hasDocuments = hasDocuments;
 function getBuildVersion() {
-  return "1.0.20";
+  return "1.0.22";
 }
 export {
   getBuildVersion,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unvired/turboforms-embed-sdk",
-  "version": "1.0.20",
+  "version": "1.0.22",
   "description": "Reusable vanilla JS form library that works with React, Angular, Ionic, etc.",
   "main": "dist/unvired-forms-sdk.js",
   "types": "dist/index.d.ts",