@unvired/turboforms-embed-sdk 1.0.21 → 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 {
@@ -1084,15 +1088,34 @@ body {
   }
 
   /* Add buffer at bottom to allow last components to scroll above the keyboard */
-  #form-container {
-    padding-bottom: 500px !important;
+  #formio-wrapper {
+    padding-bottom: 800px !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 {
+  /* 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}
@@ -40578,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 {
@@ -41149,15 +41176,34 @@ body {
   }
 
   /* Add buffer at bottom to allow last components to scroll above the keyboard */
-  #form-container {
-    padding-bottom: 500px !important;
+  #formio-wrapper {
+    padding-bottom: 800px !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 {
+  /* 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>
@@ -47063,16 +47109,9 @@ var Choices = /** @class */function () {
     requestAnimationFrame(function () {
       _this.dropdown.show();
       _this.containerOuter.open(_this.dropdown.distanceFromTopWindow);
-      if (!preventInputFocus && _this._canSearch) {
-        // 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 {
+        if (!preventInputFocus && _this._canSearch) {
           _this.input.focus({ preventScroll: true });
         }
-      }
       _this.passedElement.triggerEvent(constants_1.EVENTS.showDropdown, {});
     });
     return this;
@@ -54697,12 +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) {
           // 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);
@@ -54719,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);
@@ -54877,11 +54926,8 @@ class SmartSelectComponent extends SmartSelectField {
 
       // 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);
+        // 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
@@ -54999,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) {
@@ -60626,7 +60687,7 @@ window.CommentOnBack = CommentOnBack;
 
     
     <div id="sticky-footer">
-        <div class="build-version">SDK v1.0.21</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 {
@@ -2060,15 +2064,34 @@ body {
   }
 
   /* Add buffer at bottom to allow last components to scroll above the keyboard */
-  #form-container {
-    padding-bottom: 500px !important;
+  #formio-wrapper {
+    padding-bottom: 800px !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 {
+  /* 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 === */
@@ -27899,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.21</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>
@@ -54315,16 +54338,9 @@ var Choices = /** @class */function () {
     requestAnimationFrame(function () {
       _this.dropdown.show();
       _this.containerOuter.open(_this.dropdown.distanceFromTopWindow);
-      if (!preventInputFocus && _this._canSearch) {
-        // 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 {
+        if (!preventInputFocus && _this._canSearch) {
           _this.input.focus({ preventScroll: true });
         }
-      }
       _this.passedElement.triggerEvent(constants_1.EVENTS.showDropdown, {});
     });
     return this;
@@ -61950,12 +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) {
           // 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);
@@ -61972,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);
@@ -62130,11 +62156,8 @@ class SmartSelectComponent extends SmartSelectField {
 
       // 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);
+        // 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
@@ -62252,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) {
@@ -66348,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;
@@ -66689,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,
     };
@@ -68106,7 +68300,7 @@ window.deleteAppDocument = async function(id) {
 window.getAllDocuments = getAllDocuments;
 window.hasDocuments = hasDocuments;
 function getBuildVersion() {
-  return "1.0.21";
+  return "1.0.22";
 }
 export {
   getBuildVersion,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unvired/turboforms-embed-sdk",
-  "version": "1.0.21",
+  "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",