@oracle/oraclejet 16.0.0 → 16.0.1

package/dist/css/stable/oj-stable.css

@@ -335,7 +335,7 @@
   visibility: hidden; }
 
 .oj-theme-json {
-  font-family: '{"name":"stable","targetPlatform":"all","behavior":"redwood","jetReleaseVersion":"v16.0.0"}' !important; }
+  font-family: '{"name":"stable","targetPlatform":"all","behavior":"redwood","jetReleaseVersion":"v16.0.1"}' !important; }
 
 .oj-helper-hidden-accessible {
   border: 0;
@@ -22423,12 +22423,16 @@ html[dir="rtl"] .oj-table-sort .oj-table-column-header-show-required-icon {
 .oj-table-gutter-start-header-cell,
 .oj-table-gutter-start-body-cell,
 .oj-table-gutter-start-footer-cell {
-  width: calc(var(--oj-core-gutter-start, var(--oj-table-cell-padding-horizontal)) - var(--oj-table-cell-padding-horizontal)); }
+  width: calc(var(--oj-core-gutter-start, var(--oj-table-cell-padding-horizontal)) - var(--oj-table-cell-padding-horizontal));
+  min-width: calc(var(--oj-core-gutter-start, var(--oj-table-cell-padding-horizontal)) - var(--oj-table-cell-padding-horizontal));
+  max-width: calc(var(--oj-core-gutter-start, var(--oj-table-cell-padding-horizontal)) - var(--oj-table-cell-padding-horizontal)); }
 
 .oj-table-gutter-end-header-cell,
 .oj-table-gutter-end-body-cell,
 .oj-table-gutter-end-footer-cell {
-  width: calc(var(--oj-core-gutter-end, var(--oj-table-cell-padding-horizontal)) - var(--oj-table-cell-padding-horizontal)); }
+  width: calc(var(--oj-core-gutter-end, var(--oj-table-cell-padding-horizontal)) - var(--oj-table-cell-padding-horizontal));
+  min-width: calc(var(--oj-core-gutter-end, var(--oj-table-cell-padding-horizontal)) - var(--oj-table-cell-padding-horizontal));
+  max-width: calc(var(--oj-core-gutter-end, var(--oj-table-cell-padding-horizontal)) - var(--oj-table-cell-padding-horizontal)); }
 
 .oj-table-custom-header {
   text-overflow: ellipsis; }

package/dist/js/libs/oj/debug/ojcore-base.js

@@ -37,12 +37,12 @@ define(['ojs/ojlogger'], function (Logger) { 'use strict';
      * @global
      * @member {string} version JET version numberr
      */
-    version: '16.0.0',
+    version: '16.0.1',
     /**
      * @global
      * @member {string} revision JET source code revision number
      */
-    revision: '2024-02-10_08-15-32',
+    revision: '2024-03-20_19-05-18',
 
     // This function is only meant to be used outside the library, so quoting the name
     // to avoid renaming is appropriate

package/dist/js/libs/oj/debug/ojcorerouter.js

@@ -570,11 +570,14 @@ define(['ojs/ojobservable', 'ojs/ojurlpathadapter', 'ojs/ojlogger'], function (o
       const transition = pendingTransitions.shift();
       const newRoutes = this._getParentRoutes().concat(this._getPendingState(transition));
       const newPath = urlAdapter.getUrlForRoutes(newRoutes);
-      window.history.replaceState(null, 'path', newPath);
+      if (!this._noHistory) {
+        window.history.replaceState(null, 'path', newPath);
+      }
       route = transition;
     } else {
       route = this._getRouteSegment();
     }
+
     // Transition to the new route, or a default one if no current one exists
     return this._execute(route || { path: '', params: {} })
       .then((state) => {
@@ -583,9 +586,6 @@ define(['ojs/ojobservable', 'ojs/ojurlpathadapter', 'ojs/ojlogger'], function (o
         var childRouter = this.childRouter;
         if (childRouter) {
           p = childRouter.sync();
-        } else if (!this._noHistory) {
-          // Cleanup noHistorySegments after navigating any history-tracking routers
-          noHistorySegments = [];
         }
         return p;
       })
@@ -732,10 +732,6 @@ define(['ojs/ojobservable', 'ojs/ojurlpathadapter', 'ojs/ojlogger'], function (o
       // Get the current routes for all active routers, and compare that to the
       // new routes for this transition.
       const currentPath = urlAdapter.getUrlForRoutes(getActiveRoutes());
-      // Insert the new transitions after the current router's route offset
-      const newRoutes = this._getParentRoutes().concat(this._getPendingState(first, true));
-      const newPath = urlAdapter.getUrlForRoutes(newRoutes);
-
       const prevNoHistorySegments = noHistorySegments;
       if (this._noHistory) {
         Logger.info(`Navigating non-history tracking router(${this._name}) to ${path}`);
@@ -743,8 +739,15 @@ define(['ojs/ojobservable', 'ojs/ojurlpathadapter', 'ojs/ojlogger'], function (o
         // to store their transitions. Replace the segments after our index with
         // the new transitions
         noHistorySegments = noHistorySegments.slice(0, this._noHistoryOffset).concat(transitions);
-      } else if (currentPath !== newPath) {
-        window.history.pushState(null, 'path', newPath);
+      } else {
+        // Cleanup noHistorySegments when navigating any history-tracking routers
+        noHistorySegments = [];
+        // Insert the new transitions after the current router's route offset
+        const newRoutes = this._getParentRoutes().concat(this._getPendingState(first, true));
+        const newPath = urlAdapter.getUrlForRoutes(newRoutes);
+        if (currentPath !== newPath) {
+          window.history.pushState(null, 'path', newPath);
+        }
       }
       goP = this.sync().catch((ex) => {
         // Clear transitions if transition rejected
@@ -809,7 +812,7 @@ define(['ojs/ojobservable', 'ojs/ojurlpathadapter', 'ojs/ojlogger'], function (o
       if (activeSync !== this._activeSync) {
         // If this isn't the latest sync, then reject the Promise because another
         // sync() is already underway
-        return Promise.reject();
+        return Promise.reject('sync overridden');
       }
       return s;
     });

package/dist/js/libs/oj/debug/ojdatacollection-common.js

@@ -913,7 +913,10 @@ define(['exports', 'ojs/ojcore-base', 'ojs/ojdomutils', 'ojs/ojlogger', 'ojs/ojk
    * @private
    */
   DataCollectionUtils.isFetchAborted = function (fetchResult) {
-    var signal = fetchResult.value.fetchParameters.signal;
+    if (fetchResult?.value == null) {
+      return false;
+    }
+    var signal = fetchResult.value.fetchParameters?.signal;
     if (signal == null) {
       Logger.warn(
         'Signal is missing from fetch parameters, which is set by collection component and should be present'

package/dist/js/libs/oj/debug/ojdatagrid.js

@@ -5848,8 +5848,8 @@ var __oj_data_grid_metadata =
     this.setElementWidth(colEndHeader, columnHeaderWidth);
 
     [rowHeaderWidth, colHeaderHeight] = this._setFrozenContainerDimension(
-      availableWidth,
-      availableHeight,
+      databodyWidth,
+      databodyHeight,
       rowHeaderWidth,
       rowEndHeaderWidth,
       colHeaderHeight,
@@ -6062,7 +6062,10 @@ var __oj_data_grid_metadata =
           this.m_utils.removeCSSClassName(this.m_bottomCorner, style);
         }
       }
-      tags = this.m_rowEndHeader.firstChild.childNodes;
+      tags = Array.from(this.m_rowEndHeader.firstChild.childNodes);
+      if (this.m_rowEndHeaderFrozen?.firstChild?.childNodes?.length) {
+        tags.push(...this.m_rowEndHeaderFrozen.firstChild.childNodes);
+      }
       for (i = 0; i < tags.length; i++) {
         if (bw) {
           this.m_utils.addCSSClassName(tags[i], style);
@@ -6129,7 +6132,10 @@ var __oj_data_grid_metadata =
           this.m_utils.removeCSSClassName(this.m_bottomCorner, style);
         }
       }
-      tags = this.m_colEndHeader.firstChild.childNodes;
+      tags = Array.from(this.m_colEndHeader.firstChild.childNodes);
+      if (this.m_colEndHeaderFrozen?.firstChild?.childNodes?.length) {
+        tags.push(...this.m_colEndHeaderFrozen.firstChild.childNodes);
+      }
       const groupingContainerStyle = this.getMappedStyle('groupingcontainer');
       // Identify if the endHeader is a groupingcontainer and apply style to the first child.
       for (i = 0; i < tags.length; i++) {
@@ -17131,8 +17137,8 @@ var __oj_data_grid_metadata =
     // are available and insert is done at the end of the frozen section.
     if (this._hasFrozenColumns() || this._hasFrozenRows()) {
       if (
-        (axis === 'column' && offset <= this.m_frozenColIndex + 1) ||
-        (axis === 'row' && offset <= this.m_frozenRowIndex + 1)
+        (axis === 'column' && this._hasFrozenColumns() && offset <= this.m_frozenColIndex + 1) ||
+        (axis === 'row' && this._hasFrozenRows() && offset <= this.m_frozenRowIndex + 1)
       ) {
         frozenDimensions = new Array(count).fill(totalDimension / count);
       } else {
@@ -18208,11 +18214,14 @@ var __oj_data_grid_metadata =
     let frozenColExists = this.m_frozenColIndex !== null && this.m_frozenColIndex !== -1;
     let frozenRowExists = this.m_frozenRowIndex !== null && this.m_frozenRowIndex !== -1;
 
+    // * If no frozen section, mutate the rest of the databody
+    // * If either of them exists, then check if the row/col End exceeds the frozen region and mutate the rest of the databody
+    // * ensure check for frozenAxisExists as 1 > null alone shall pass
     if (
       (!frozenColExists && !frozenRowExists) ||
       ((frozenColExists || frozenRowExists) &&
-        rowEnd > this.m_frozenRowIndex &&
-        colEnd > this.m_frozenColIndex)
+        (!frozenRowExists || rowEnd > this.m_frozenRowIndex) &&
+        (!frozenColExists || colEnd > this.m_frozenColIndex))
     ) {
       this._fetchAndMutateCellsByRange(cellSet, this.m_databody, rowStart, rowEnd, colStart, colEnd);
     }
@@ -18438,6 +18447,14 @@ var __oj_data_grid_metadata =
           if (endHeaders.length) {
             this._removeAndModifyHeaders(endHeaders, dimension, dimensionToRetrieve, dirToSet, index);
           }
+          if (
+            (axis === 'column' && this._hasFrozenColumns() && index <= this.m_frozenColIndex) ||
+            (axis === 'row' && this._hasFrozenRows() && index <= this.m_frozenRowIndex)
+          ) {
+            frozenSectionDimension += dimension;
+          } else {
+            databodyDimension += dimension;
+          }
         }
         if (
           (axis === 'column' && this._hasFrozenColumns() && index <= this.m_frozenColIndex) ||
@@ -18448,14 +18465,6 @@ var __oj_data_grid_metadata =
           insideDeletedDimension += dimension;
           dimensions.unshift(dimension);
         }
-        if (
-          (axis === 'column' && this._hasFrozenColumns() && index <= this.m_frozenColIndex) ||
-          (axis === 'row' && this._hasFrozenRows() && index <= this.m_frozenRowIndex)
-        ) {
-          frozenSectionDimension += dimension;
-        } else {
-          databodyDimension += dimension;
-        }
       } else if (flag === DvtDataGrid.AFTER && this.m_options.getScrollPolicy() === 'scroll') {
         // only concerned with after rows if virtual scroll
         databodyDimension += dimension;
@@ -18593,6 +18602,9 @@ var __oj_data_grid_metadata =
       }
       var databodyContentHeight = this.getElementHeight(databodyContent) - databodyDimension;
       this.setElementHeight(databodyContent, databodyContentHeight);
+      if (this.m_databodyFrozenCol) {
+        this.setElementHeight(this.m_databodyFrozenCol, databodyContentHeight);
+      }
       if (this.m_databodyFrozenRow) {
         var frozenDatabodyContentHeight =
           this.getElementHeight(this.m_databodyFrozenRow) - frozenSectionDimension;
@@ -18629,6 +18641,9 @@ var __oj_data_grid_metadata =
       }
       var databodyContentWidth = this.getElementWidth(databodyContent) - databodyDimension;
       this.setElementWidth(databodyContent, databodyContentWidth);
+      if (this.m_databodyFrozenRow) {
+        this.setElementWidth(this.m_databodyFrozenRow, databodyContentWidth);
+      }
       if (this.m_databodyFrozenCol) {
         var frozenDatabodyContentWidth =
           this.getElementWidth(this.m_databodyFrozenCol) - frozenSectionDimension;
@@ -19178,31 +19193,21 @@ var __oj_data_grid_metadata =
     if (root == null) {
       return null;
     }
+    var sections = [];
+    var headers = [];
+    sections.push(root);
 
-    var headers;
-
-    // identify region based on the frozen indexes.
-    if (
-      this._hasFrozenRows() &&
-      parseInt(key, 10) <= this.m_frozenRowIndex &&
-      (root === this.m_rowHeader || root === this.m_rowEndHeader)
-    ) {
-      // eslint-disable-next-line no-param-reassign
-      root = root === this.m_rowHeader ? this.m_rowHeaderFrozen : this.m_rowEndHeaderFrozen;
+    if (this._hasFrozenRows() && (root === this.m_rowHeader || root === this.m_rowEndHeader)) {
+      let section = root === this.m_rowHeader ? this.m_rowHeaderFrozen : this.m_rowEndHeaderFrozen;
+      sections.push(section);
     }
-    if (
-      this._hasFrozenColumns() &&
-      parseInt(key, 10) <= this.m_frozenColIndex &&
-      (root === this.m_colHeader || root === this.m_colEndHeader)
-    ) {
-      // eslint-disable-next-line no-param-reassign
-      root = root === this.m_colHeader ? this.m_colHeaderFrozen : this.m_colEndHeaderFrozen;
+    if (this._hasFrozenColumns() && (root === this.m_colHeader || root === this.m_colEndHeader)) {
+      let section = root === this.m_colHeader ? this.m_colHeaderFrozen : this.m_colEndHeaderFrozen;
+      sections.push(section);
     }
-    // getElementsByClassName support is IE9 and up
-    if (root.getElementsByClassName) {
-      headers = root.getElementsByClassName(className);
-    } else {
-      headers = root.childNodes;
+
+    for (let i = 0; i < sections.length; i++) {
+      headers.push(...sections[i].getElementsByClassName(className));
     }
     for (var i = 0; i < headers.length; i++) {
       var header = headers[i];
@@ -27110,6 +27115,13 @@ var __oj_data_grid_metadata =
       if ((resizeHeaderMode === 'column' || resizeHeaderMode === 'columnEnd') && !isHeaderLabel) {
         // index based
         dimension = 'columnWidth';
+        details.ui.size = this.getElementWidth(
+          this._getHeaderByIndex(
+            resizingElementIndex + context.extent - 1,
+            'column',
+            this.m_columnHeaderLevelCount - 1
+          )
+        );
       } else if (isHeaderLabel) {
         let isRowEndHeaderLabel = this.m_utils.containsCSSClassName(
           this.m_resizingElement,
@@ -27117,10 +27129,9 @@ var __oj_data_grid_metadata =
         );
         dimension = isRowEndHeaderLabel ? 'rowEndHeaderWidth' : 'rowHeaderWidth';
         details.ui.levels = [
-          resizeHeaderMode.includes('row')
-            ? context.level + context.depth - 1
-            : this.m_rowHeaderLevelCount - 1
+          resizeHeaderMode.includes('row') ? context.level : this.m_rowHeaderLevelCount - 1
         ];
+        details.ui.size = newWidth;
       } else {
         let isRowEndHeader = this.m_utils.containsCSSClassName(
           this.m_resizingElement,
@@ -27128,13 +27139,22 @@ var __oj_data_grid_metadata =
         );
         dimension = isRowEndHeader ? 'rowEndHeaderWidth' : 'rowHeaderWidth';
         details.ui.levels = [context.level + context.depth - 1];
+        details.ui.size = isRowEndHeader
+          ? this.m_rowEndHeaderLevelWidths[context.level + context.depth - 1]
+          : this.m_rowHeaderLevelWidths[context.level + context.depth - 1];
       }
-      details.ui.size = newWidth;
       details.ui.dimension = dimension;
     } else if (newHeight !== oldHeight) {
       if ((resizeHeaderMode === 'row' || resizeHeaderMode === 'rowEnd') && !isHeaderLabel) {
         // index based
         dimension = 'rowHeight';
+        details.ui.size = this.getElementHeight(
+          this._getHeaderByIndex(
+            resizingElementIndex + context.extent - 1,
+            'row',
+            this.m_rowHeaderLevelCount - 1
+          )
+        );
       } else if (isHeaderLabel) {
         let isColumnEndHeaderLabel = this.m_utils.containsCSSClassName(
           this.m_resizingElement,
@@ -27142,10 +27162,9 @@ var __oj_data_grid_metadata =
         );
         dimension = isColumnEndHeaderLabel ? 'columnEndHeaderHeight' : 'columnHeaderHeight';
         details.ui.levels = [
-          resizeHeaderMode.includes('column')
-            ? context.level + context.depth - 1
-            : this.m_columnHeaderLevelCount - 1
+          resizeHeaderMode.includes('column') ? context.level : this.m_columnHeaderLevelCount - 1
         ];
+        details.ui.size = newHeight;
       } else {
         let isColumnEndHeader = this.m_utils.containsCSSClassName(
           this.m_resizingElement,
@@ -27153,8 +27172,10 @@ var __oj_data_grid_metadata =
         );
         dimension = isColumnEndHeader ? 'columnEndHeaderHeight' : 'columnHeaderHeight';
         details.ui.levels = [context.level + context.depth - 1];
+        details.ui.size = isColumnEndHeader
+          ? this.m_columnEndHeaderLevelHeights[context.level + context.depth - 1]
+          : this.m_columnHeaderLevelHeights[context.level + context.depth - 1];
       }
-      details.ui.size = newHeight;
       details.ui.dimension = dimension;
     } else {
       return;
@@ -27418,7 +27439,7 @@ var __oj_data_grid_metadata =
         if ((!end && bottomEdgeCheck) || (end && topEdgeCheck)) {
           this.m_resizingElement = elem;
           return 'row-resize';
-        } else if ((!end && topEdgeCheck) || (end && bottomEdgeCheck)) {
+        } else if (((!end && topEdgeCheck) || (end && bottomEdgeCheck)) && level !== 0) {
           // can we resize the height of the parent header
           this.m_resizingElement = parent;
           this.m_resizingElementSibling = elem;
@@ -27450,8 +27471,9 @@ var __oj_data_grid_metadata =
           this.m_resizingElement = elem;
           return 'col-resize';
         } else if (
-          (!end && (rtl ? rightEdgeCheck : leftEdgeCheck)) ||
-          (end && (rtl ? leftEdgeCheck : rightEdgeCheck))
+          ((!end && (rtl ? rightEdgeCheck : leftEdgeCheck)) ||
+            (end && (rtl ? leftEdgeCheck : rightEdgeCheck))) &&
+          level !== 0
         ) {
           this.m_resizingElement = parent;
           this.m_resizingElementSibling = elem;
@@ -28485,8 +28507,8 @@ var __oj_data_grid_metadata =
     this.setElementWidth(colEndHeader, columnHeaderWidth);
 
     [rowHeaderWidth, colHeaderHeight] = this._setFrozenContainerDimension(
-      availableWidth,
-      availableHeight,
+      databodyWidth,
+      databodyHeight,
       rowHeaderWidth,
       rowEndHeaderWidth,
       colHeaderHeight,
@@ -28831,33 +28853,23 @@ var __oj_data_grid_metadata =
 
       if (!(tempArray[i] && tempArray[i][startAxisChange]) && shiftOnly !== true) {
         this.setElementDir(cell, this.getElementDir(cell, dimension) + dimensionDelta, dimension);
-        if (axis === 'row') {
-          this._updateTempArray(
-            tempArray,
-            true,
-            i,
-            startAxisChange,
-            cellContext.extents.column,
-            axisExtent - extentWithinCellToIgnore
-          );
-        } else {
-          if (forHideShow) {
-            if (this.isHidden(axis, startAxisChange)) {
-              cell.style.display = 'none';
-            } else {
-              cell.style.display = '';
-            }
+        if (forHideShow) {
+          if (this.isHidden(axis, startAxisChange)) {
+            cell.style.display = 'none';
+          } else {
+            cell.style.display = '';
           }
-
-          this._updateTempArray(
-            tempArray,
-            true,
-            i,
-            startAxisChange,
-            cellContext.extents.row,
-            axisExtent - extentWithinCellToIgnore
-          );
         }
+
+        const otherAxis = axis === 'row' ? 'column' : 'row';
+        this._updateTempArray(
+          tempArray,
+          true,
+          i,
+          startAxisChange,
+          cellContext.extents[otherAxis],
+          axisExtent - extentWithinCellToIgnore
+        );
       }
       let axisStartValue = startAxisChange;
       if (shiftOnly !== true) {
@@ -45006,8 +45018,10 @@ var __oj_data_grid_metadata =
       endHeaderFetchCount: 0
     };
 
+    // null check and -1 check to fully ensure frozenSection doesn't exist.
     if (
       this.m_options._getFreezeIndex(axis) === null ||
+      this.m_options._getFreezeIndex(axis) === -1 ||
       !this._isFreezeFeasible(axis, startResults, endResults, start, 0)
     ) {
       returnObj = {
@@ -50148,7 +50162,7 @@ var __oj_data_grid_metadata =
           undefined,
           true
         );
-        if (this.m_databodyFrozenRow) {
+        if (this.m_databodyFrozenRow || this.m_databodyFrozenCol) {
           this._shiftFrozenCellsAlongAxis(axis, dimensionChange, axisIndex, false, true);
         }
         // eslint-disable-next-line no-unused-expressions
@@ -50156,8 +50170,8 @@ var __oj_data_grid_metadata =
           ? (this.m_endColPixel += dimensionChange)
           : (this.m_endRowPixel += dimensionChange);
       } else if (
-        (axis === 'column' && this.m_databodyFrozenRow) ||
-        (axis === 'row' && this.m_databodyFrozenCol)
+        (axis === 'column' && this.m_databodyFrozenCol) ||
+        (axis === 'row' && this.m_databodyFrozenRow)
       ) {
         corner = true;
         this._shiftCellsAlongAxis(

package/dist/js/libs/oj/debug/ojdrawerpopup.js

@@ -84,6 +84,7 @@ define(['exports', 'preact/jsx-runtime', 'ojs/ojvcomponent', 'preact', 'jquery',
                 const $drawerElement = $(this.rootRef.current);
                 const status = ZOrderUtils.getStatus($drawerElement);
                 if (status === ZOrderUtils.STATUS.OPEN) {
+                    $drawerElement.detach();
                     const psOptions = {};
                     psOptions[PopupService.OPTION.POPUP] = $drawerElement;
                     this.ignoreUpdate = true;

package/dist/js/libs/oj/debug/ojinputtext.js

@@ -2958,6 +2958,14 @@ var __oj_text_area_metadata =
    * @ojoracleicon 'oj-ux-ico-text-input-password'
    * @ojuxspecs ['input-password']
    *
+   * @ojdeprecated [
+   *   {
+   *     "type": "maintenance",
+   *     "since": "16.0.0",
+   *     "value": ["oj-c-input-password"]
+   *   }
+   * ]
+   *
    * @classdesc
    * <h3 id="inputPasswordOverview-section">
    *   JET InputPassword Component
@@ -3626,6 +3634,14 @@ var __oj_text_area_metadata =
    * @ojoracleicon 'oj-ux-ico-text-input'
    * @ojuxspecs ['input-text']
    *
+   * @ojdeprecated [
+   *   {
+   *     "type": "maintenance",
+   *     "since": "16.0.0",
+   *     "value": ["oj-c-input-text"]
+   *   }
+   * ]
+   *
    * @classdesc
    * <h3 id="inputTextOverview-section">
    *   JET InputText Component
@@ -4638,6 +4654,14 @@ var __oj_text_area_metadata =
    * @ojoracleicon 'oj-ux-ico-text-input-area'
    * @ojuxspecs ['input-text']
    *
+   * @ojdeprecated [
+   *   {
+   *     "type": "maintenance",
+   *     "since": "16.0.0",
+   *     "value": ["oj-c-text-area"]
+   *   }
+   * ]
+   *
    * @classdesc
    * <h3 id="textAreaOverview-section">
    *   JET TextArea Component

package/dist/js/libs/oj/debug/ojselectbase.js

@@ -4948,46 +4948,70 @@ define(['exports', 'ojs/ojeditablevalue', 'ojs/ojpopupcore', 'ojs/ojinputtext',
         // grab the latest processSetOptions object and remove it from the array
         var processSetOptions = this._processSetOptions.pop();
 
-        // JET-34601 - SELECT SINGLE- CHANGING DISABLED PROPERTY GIVES A GLOWING EFFECT
-        // if we need to refresh, do that before setting a new value
-        if (processSetOptions.forRefresh) {
-          processSetOptions.forRefresh();
-        }
-
-        // turn off the flag now, after refreshing but before processing the new value,
-        // only if we set the flag during this call to _setOptions
-        if (resolveBusyState) {
-          this._deferSettingValue = false;
-        }
+        const finishProcessingSetOptions = () => {
+          // JET-34601 - SELECT SINGLE- CHANGING DISABLED PROPERTY GIVES A GLOWING EFFECT
+          // if we need to refresh, do that before setting a new value
+          if (processSetOptions.forRefresh) {
+            processSetOptions.forRefresh();
+          }
 
-        if (processSetOptions.value) {
-          processSetOptions.value();
-        } else if (needToUpdateValueItem) {
-          // JET-42413: set flag while we're processing a value change so that if an app makes
-          // changes to the component from within the change listener, we can defer processing the
-          // new change until after we're done processing the current change
-          var resolveValueChangeFunc = this._StartMakingInternalValueChange();
+          // turn off the flag now, after refreshing but before processing the new value,
+          // only if we set the flag during this call to _setOptions
+          if (resolveBusyState) {
+            this._deferSettingValue = false;
+          }
 
-          // JET-38441 - WHEN GENERATOR VARIABLE OF TYPE 'OJS/OJARRAYDATAPROVIDER' IS BOUND TO
-          // SELECT-SINGLE, IT FAILS TO SHOW THE SELECTED VALUE
-          // if setting new data and the current valueItem was set internally, then it needs to be
-          // updated for the new data, which will happen when we re-set the existing value
-          this._setOption('value', this.options.value);
+          if (processSetOptions.value) {
+            processSetOptions.value();
+          } else if (needToUpdateValueItem) {
+            // JET-42413: set flag while we're processing a value change so that if an app makes
+            // changes to the component from within the change listener, we can defer processing the
+            // new change until after we're done processing the current change
+            var resolveValueChangeFunc = this._StartMakingInternalValueChange();
+
+            // JET-38441 - WHEN GENERATOR VARIABLE OF TYPE 'OJS/OJARRAYDATAPROVIDER' IS BOUND TO
+            // SELECT-SINGLE, IT FAILS TO SHOW THE SELECTED VALUE
+            // if setting new data and the current valueItem was set internally, then it needs to be
+            // updated for the new data, which will happen when we re-set the existing value
+            this._setOption('value', this.options.value);
+
+            resolveValueChangeFunc();
+          }
 
-          resolveValueChangeFunc();
-        }
+          // JET-42353 - SELECT SINGLE FOCUS LOST ON CHANGE OF THE DEPENDENT VALUE
+          // if the filter field was shown before processing the new options, but is no longer shown,
+          // show it again
+          if (showFilterField && this._filterInputText.style.visibility === 'hidden') {
+            // need to wait for the new filter oj-input-text to be upgraded
+            var busyContext = Context.getContext(this._filterInputText).getBusyContext();
+            busyContext.whenReady().then(
+              function () {
+                this._ShowFilterField();
+              }.bind(this)
+            );
+          }
+        };
 
-        // JET-42353 - SELECT SINGLE FOCUS LOST ON CHANGE OF THE DEPENDENT VALUE
-        // if the filter field was shown before processing the new options, but is no longer shown,
-        // show it again
-        if (showFilterField && this._filterInputText.style.visibility === 'hidden') {
-          // need to wait for the new filter oj-input-text to be upgraded
-          var busyContext = Context.getContext(this._filterInputText).getBusyContext();
-          busyContext.whenReady().then(
-            function () {
-              this._ShowFilterField();
-            }.bind(this)
-          );
+        // JET-65611 - Form is in invalid state though the values are populated correctly
+        // This bug was related to the fact that the framework introduced changes in JET 16 so that
+        // the component gets batched property sets in VDOM, similar to knockout.js, whereas before
+        // each property was set individually.  For some property sets, like readonly, the code
+        // internally does a refresh.  For a valueItem change, in VDOM only, the code processes it
+        // in a microtask (to fix other issues encountered in VDOM).  With the previous, individual
+        // property setting behavior in VDOM, an internal refresh would happen before the new
+        // valueItem was even set on the component.  With the batching property setting behavior,
+        // the valueItem started to be processed before the internal refresh and then finished after
+        // the refresh, such that the changes were interfering with each other.  The fix defers
+        // finishing processing of the _setOptions call, including the refresh, to a microtask that
+        // is queued after the microtask to finish handling the valueItem change.  So when the
+        // refresh happens, it is after the valueItem change has finished.  This ordering is not the
+        // same as what happened before in VDOM, but it is the same as what happens outside of VDOM,
+        // like in the cookbook MVVM app.
+        const elemState = ojcustomelementUtils.CustomElementUtils.getElementState(this.OuterWrapper);
+        if (elemState.getBindingProviderType() === 'preact') {
+          window.queueMicrotask(finishProcessingSetOptions);
+        } else {
+          finishProcessingSetOptions();
         }
       } finally {
         if (resolveBusyState) {