@unvired/turboforms-embed-sdk 1.0.19 → 1.0.21

package/dist/unvired-form-sdk.html

@@ -1077,6 +1077,22 @@ 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 */
+  #form-container {
+    padding-bottom: 500px !important;
+  }
+
+  /* Ensure DataGrid rows allow dropdowns to overflow now that we disabled fixed positioning on iOS */
+  .formio-component-datagrid .ui.table tr,
+  .formio-component-datagrid .ui.table td {
+    overflow: visible !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}
@@ -41126,6 +41142,22 @@ 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 */
+  #form-container {
+    padding-bottom: 500px !important;
+  }
+
+  /* Ensure DataGrid rows allow dropdowns to overflow now that we disabled fixed positioning on iOS */
+  .formio-component-datagrid .ui.table tr,
+  .formio-component-datagrid .ui.table td {
+    overflow: visible !important;
+  }
 }</style>
 
     <script>
@@ -47032,7 +47064,14 @@ var Choices = /** @class */function () {
       _this.dropdown.show();
       _this.containerOuter.open(_this.dropdown.distanceFromTopWindow);
       if (!preventInputFocus && _this._canSearch) {
-        _this.input.focus();
+        // On iOS, delay focus slightly to ensure the keyboard has time to reset/close from previous field
+        if (window.platform && window.platform.iosPlatform) {
+          setTimeout(() => {
+            _this.input.focus({ preventScroll: true });
+          }, 150);
+        } else {
+          _this.input.focus({ preventScroll: true });
+        }
       }
       _this.passedElement.triggerEvent(constants_1.EVENTS.showDropdown, {});
     });
@@ -47515,7 +47554,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 +47983,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 +48043,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 +48127,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 +54610,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']),
@@ -54660,7 +54700,9 @@ class SmartSelectComponent extends SmartSelectField {
         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.addEventListener(this.choices.containerOuter.element, 'focus', () => this.focusableElement.focus({ preventScroll: true }));
         }
       }
       this.addFocusBlurEvents(this.focusableElement);
@@ -54787,26 +54829,100 @@ 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) {
+        setTimeout(() => {
+          if (this.focusableElement) {
+            this.focusableElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+          }
+        }, 300);
+      }
+
+      // 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 +54974,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() {
@@ -56779,7 +56901,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 +60626,7 @@ window.CommentOnBack = CommentOnBack;
 
     
     <div id="sticky-footer">
-        <div class="build-version">v1.0.19</div>
+        <div class="build-version">SDK v1.0.21</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

@@ -2053,6 +2053,22 @@ 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 */
+  #form-container {
+    padding-bottom: 500px !important;
+  }
+
+  /* Ensure DataGrid rows allow dropdowns to overflow now that we disabled fixed positioning on iOS */
+  .formio-component-datagrid .ui.table tr,
+  .formio-component-datagrid .ui.table td {
+    overflow: visible !important;
+  }
 }
 
 /* === STYLE_SEPARATOR === */
@@ -27769,7 +27785,7 @@ select.ui.dropdown {
       }
       .build-version {
         margin-right: auto;
-        font-size: 11px;
+        font-size: 10px;
         color: #888;
         padding-left: 10px;
         font-family: inherit;
@@ -27883,7 +27899,7 @@ select.ui.dropdown {
       <div id="formio-cmt" style="margin-bottom: 20px;"></div>
     </div>
     <div id="sticky-footer">
-      <div class="build-version">v1.0.19</div>
+      <div class="build-version">SDK v1.0.21</div>
       <button class="ui button primary dataGrid-addRow" id="saveBtn" disabled="true" onclick="FormOnSave()">
         <i class="icon save large"></i>Save
       </button>
@@ -54300,7 +54316,14 @@ var Choices = /** @class */function () {
       _this.dropdown.show();
       _this.containerOuter.open(_this.dropdown.distanceFromTopWindow);
       if (!preventInputFocus && _this._canSearch) {
-        _this.input.focus();
+        // On iOS, delay focus slightly to ensure the keyboard has time to reset/close from previous field
+        if (window.platform && window.platform.iosPlatform) {
+          setTimeout(() => {
+            _this.input.focus({ preventScroll: true });
+          }, 150);
+        } else {
+          _this.input.focus({ preventScroll: true });
+        }
       }
       _this.passedElement.triggerEvent(constants_1.EVENTS.showDropdown, {});
     });
@@ -54783,7 +54806,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 +55235,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 +55295,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 +55379,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 +61863,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']),
@@ -61929,7 +61953,9 @@ class SmartSelectComponent extends SmartSelectField {
         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.addEventListener(this.choices.containerOuter.element, 'focus', () => this.focusableElement.focus({ preventScroll: true }));
         }
       }
       this.addFocusBlurEvents(this.focusableElement);
@@ -62056,26 +62082,100 @@ 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) {
+        setTimeout(() => {
+          if (this.focusableElement) {
+            this.focusableElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+          }
+        }, 300);
+      }
+
+      // 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 +62227,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() {
@@ -64053,7 +64159,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();
+        }
       }
     }
 
@@ -66733,71 +66844,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");
 
-        const wizardSubmitBtns = document.querySelectorAll(
-          ".btn-wizard-nav-submit"
+        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...");
+
+        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 +68106,7 @@ window.deleteAppDocument = async function(id) {
 window.getAllDocuments = getAllDocuments;
 window.hasDocuments = hasDocuments;
 function getBuildVersion() {
-  return "1.0.19";
+  return "1.0.21";
 }
 export {
   getBuildVersion,

package/package.json

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