@oracle/oraclejet 16.0.0 → 16.0.2

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

@@ -35,7 +35,7 @@ const AbstractLovBase = function (options) {
   // idSuffix, lovMainField, filterInputText, lovDropdown, liveRegion, enabled, readOnly, value,
   // getTranslatedStringFunc, addBusyStateFunc, showMainFieldFunc, setFilterFieldTextFunc,
   // setUiLoadingStateFunc, isValueForPlaceholderFunc, isShowValueInFilterFieldFunc,
-  // getFilterInputElemFunc}
+  // getFilterInputElemFunc, matchBy}
   this._minLength = 0;
 
   this._className = options.className;
@@ -59,6 +59,7 @@ const AbstractLovBase = function (options) {
   this._isValueForPlaceholderFunc = options.isValueForPlaceholderFunc;
   this._isShowValueInFilterFieldFunc = options.isShowValueInFilterFieldFunc;
   this._getFilterInputElemFunc = options.getFilterInputElemFunc;
+  this._matchBy = options.matchBy;
 
   this._lastDataProviderPromise = null;
 
@@ -76,6 +77,10 @@ AbstractLovBase.prototype.setValue = function (value) {
   this._value = value;
 };
 
+AbstractLovBase.prototype.setMatchBy = function (matchBy) {
+  this._matchBy = matchBy;
+};
+
 AbstractLovBase.prototype.getFetchType = function () {
   return this._fetchType;
 };
@@ -477,6 +482,7 @@ AbstractLovBase.prototype._fetchFromDataProvider = function (term, initial) {
 
   var filterCriteria = null;
   if (term) {
+    var matchBy;
     if (this._dataProvider) {
       var filterCapability = this._dataProvider.getCapability('filter');
       if (!filterCapability || !filterCapability.textFilter) {
@@ -484,12 +490,43 @@ AbstractLovBase.prototype._fetchFromDataProvider = function (term, initial) {
           'Select: DataProvider does not support text filter.  ' +
             'Filtering results in dropdown may not work correctly.'
         );
+      } else if (this._matchBy) {
+        // JET-60725 - Add option to specify the matchBy behavior of the text filter
+        // Find the first matchBy behavior in the array that the data provider supports.
+        matchBy = this._matchBy.reduce((result, curr) => {
+          // if we've already found a supported matchBy, use it
+          if (result) {
+            return result;
+          }
+          // if we've encountered 'unknown' in the array, return it because it's always supported
+          if (curr === 'unknown') {
+            return curr;
+          }
+          // if we haven't found a supported matchBy yet, see if the current one is supported and
+          // return it if so; if not log a warning
+          if (curr) {
+            if (
+              filterCapability.textFilterMatching &&
+              filterCapability.textFilterMatching.matchBy &&
+              filterCapability.textFilterMatching.matchBy.indexOf(curr) > -1
+            ) {
+              return curr;
+            }
+            warn(
+              `Select: DataProvider does not support text filter "${curr}" matching.  ` +
+                'Filtering results in dropdown may not work as expected.'
+            );
+          }
+          // if we haven't found a supported matchBy yet, return undefined and go on
+          return undefined;
+        }, null);
       }
     }
 
     // create filter using FilterFactory so that default local filtering will happen if
     // underlying DP doesn't support its own filtering
-    filterCriteria = oj.FilterFactory.getFilter({ filterDef: { text: term } });
+    var filterDef = matchBy ? { text: term, matchBy } : { text: term };
+    filterCriteria = oj.FilterFactory.getFilter({ filterDef });
   }
 
   var retPromise = new Promise(
@@ -2545,7 +2582,7 @@ LovMainField.prototype.updateLabel = function (labelledBy, ariaLabel) {
  * @since 8.0.0
  * @abstract
  * @hideconstructor
- * @ojtsimport {module: "ojdataprovider", type: "AMD", imported: ["DataProvider"]}
+ * @ojtsimport {module: "ojdataprovider", type: "AMD", imported: ["DataProvider", "TextFilter"]}
  * @ojtsimport {module: "ojcommontypes", type: "AMD", importName: ["ojcommontypes"]}
  * @ojsignature [{
  *                target: "Type",
@@ -2886,7 +2923,38 @@ oj.__registerWidget('oj.ojSelectBase', $.oj.editableValue, {
      * @memberof oj.ojSelectBase
      * @ojfragment selectCommonLabelledBy
      */
-    labelledBy: null
+    labelledBy: null,
+
+    /**
+     * The list of text filter matching behaviors to use when fetching data filtered by a user's
+     * typed search text, in order of descending priority with the preferred behavior first.
+     * If the preferred behavior is not supported by the DataProvider, then the component will
+     * check the next behavior, and so on, until it finds one that is supported.
+     * If none of the specified behaviors are supported or if this property is not specified,
+     * then the behavior will effectively be "unknown".
+     *
+     * @example <caption>Initialize the Select with the <code class="prettyprint">match-by</code> attribute specified:</caption>
+     * &lt;oj-select-single match-by="[[matchByValue]]">&lt;/oj-select-single>
+     *
+     * @example <caption>Get or set the <code class="prettyprint">matchBy</code> property after initialization:</caption>
+     * // getter
+     * var matchByValue = mySelect.matchBy;
+     *
+     * // setter
+     * mySelect.matchBy = ["phrase", "fuzzy", "contains", "startsWith", "unknown"];
+     *
+     * @name matchBy
+     * @ojshortdesc The ordered list of text filter matching behaviors to use when filtering data.
+     * @expose
+     * @access public
+     * @instance
+     * @memberof oj.ojSelectBase
+     * @type {Array.<string>|null}
+     * @ojsignature {target: "Type", value: "Array<TextFilter<D>['matchBy']>|null", jsdocOverride: true}
+     * @default null
+     * @since 16.0.2
+     */
+    matchBy: null
   },
 
   /**
@@ -3125,6 +3193,12 @@ oj.__registerWidget('oj.ojSelectBase', $.oj.editableValue, {
 
     var options = this.options;
 
+    // JET-60725 - Add option to specify the matchBy behavior of the text filter
+    // Make a copy of the array to use internally so that the application can't mutate it;
+    // they have to set a new array if they want to change it.
+    this._matchBy =
+      options.matchBy && options.matchBy.length > 0 ? [...options.matchBy] : undefined;
+
     this._wrapDataProviderIfNeeded(options.data);
     this._addDataProviderEventListeners();
 
@@ -3264,7 +3338,8 @@ oj.__registerWidget('oj.ojSelectBase', $.oj.editableValue, {
       setUiLoadingStateFunc: this._setUiLoadingState.bind(this),
       isValueForPlaceholderFunc: this._IsValueForPlaceholder.bind(this),
       isShowValueInFilterFieldFunc: this._IsShowValueInFilterField.bind(this),
-      getFilterInputElemFunc: this._getFilterInputElem.bind(this)
+      getFilterInputElemFunc: this._getFilterInputElem.bind(this),
+      matchBy: this._matchBy
     });
     this._abstractLovBase = abstractLovBase;
 
@@ -4292,6 +4367,16 @@ oj.__registerWidget('oj.ojSelectBase', $.oj.editableValue, {
     oj.Assert.failedInAbstractFunction();
   },
 
+  /**
+   * Called when the filter field is blurred.
+   * @memberof! oj.ojSelectBase
+   * @instance
+   * @protected
+   */
+  _HandleFilterFieldBlur: function () {
+    oj.Assert.failedInAbstractFunction();
+  },
+
   /**
    * @memberof! oj.ojSelectBase
    * @instance
@@ -4525,6 +4610,11 @@ oj.__registerWidget('oj.ojSelectBase', $.oj.editableValue, {
           var focusInFilterField =
             document.activeElement && isAncestor(filterInputText, document.activeElement);
           if (!focusInDropdown && !this._mousedownOnDropdown && !focusInFilterField) {
+            // JET-65757 - Empty value rejected when not confirmed by Enter/Tab
+            // clear the value after deleting all the filter text and clicking outside the
+            // component
+            this._HandleFilterFieldBlur();
+
             this._showMainField();
           }
         }
@@ -4961,46 +5051,70 @@ oj.__registerWidget('oj.ojSelectBase', $.oj.editableValue, {
       // 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 = CustomElementUtils.getElementState(this.OuterWrapper);
+      if (elemState.getBindingProviderType() === 'preact') {
+        window.queueMicrotask(finishProcessingSetOptions);
+      } else {
+        finishProcessingSetOptions();
       }
     } finally {
       if (resolveBusyState) {
@@ -5026,7 +5140,15 @@ oj.__registerWidget('oj.ojSelectBase', $.oj.editableValue, {
       }
     }
 
-    this._super(key, value, flags);
+    // JET-64632 - DataProvider refresh event can wipe out currently selected value
+    // If we get a DP refresh event we may re-set the currently selected value so that we fetch
+    // new data for it, in which case we don't want to fire a change event, so don't call the
+    // superclass.
+    var bSkipSuperclassCall = key === 'value' && this.options.value === value;
+
+    if (!bSkipSuperclassCall) {
+      this._super(key, value, flags);
+    }
 
     // In vdom architecture, there are multiple issues with value and valueItem property that we need to
     // handle.
@@ -5211,6 +5333,14 @@ oj.__registerWidget('oj.ojSelectBase', $.oj.editableValue, {
       // JET-45922 - timing issue with select-single: lov drop-down doesn't have element
       // do a granular update if item-text changes instead of a general refresh
       this._UpdateItemText();
+    } else if (key === 'matchBy') {
+      // JET-60725 - Add option to specify the matchBy behavior of the text filter
+      // Make a copy of the array to use internally so that the application can't mutate it;
+      // they have to set a new array if they want to change it.
+      this._matchBy = value && value.length > 0 ? [...value] : undefined;
+      if (this._abstractLovBase) {
+        this._abstractLovBase.setMatchBy(this._matchBy);
+      }
     }
   },
 

package/dist/js/libs/oj/debug_esm/ojselectsingle.js

@@ -94,6 +94,9 @@ var __oj_select_single_metadata =
     "labelledBy": {
       "type": "string"
     },
+    "matchBy": {
+      "type": "Array<string>"
+    },
     "messagesCustom": {
       "type": "Array<Object>",
       "writeback": true,
@@ -822,7 +825,11 @@ oj.__registerWidget('oj.ojSelectSingle', $.oj.ojSelectBase, {
    * @override
    */
   _ReleaseSelectResources: function (shouldRetainMainFieldElem) {
+    this._bReleasingSelectResources = true;
+
     this._super(shouldRetainMainFieldElem);
+
+    this._bReleasingSelectResources = false;
   },
 
   /**
@@ -885,6 +892,34 @@ oj.__registerWidget('oj.ojSelectSingle', $.oj.ojSelectBase, {
     this._handleSelection(this._GetDefaultValueItemForPlaceholder());
   },
 
+  /**
+   * Called when the filter field is blurred.
+   * @memberof! oj.ojSelectSingle
+   * @instance
+   * @protected
+   * @override
+   */
+  _HandleFilterFieldBlur: function () {
+    // JET-65757 - Empty value rejected when not confirmed by Enter/Tab
+    // clear the value after deleting all the filter text and clicking outside the
+    // component;
+    // check whether placeholder valueItem is already set so that we don't trigger
+    // validation unnecessarily
+    if (
+      !this._fullScreenPopup &&
+      !this._bReleasingSelectResources &&
+      this._IsFilterInputTextCleared()
+    ) {
+      if (
+        !this._IsValueForPlaceholder(this.options.value) ||
+        !this._IsValueItemForPlaceholder(this.options.valueItem)
+      ) {
+        // on desktop, if the user clears all the text and clicks out, clear the LOV value
+        this._handleSelection(this._defaultValueItemForPlaceholder, null, true);
+      }
+    }
+  },
+
   /**
    * @memberof! oj.ojSelectSingle
    * @instance
@@ -1564,6 +1599,7 @@ oj.__registerWidget('oj.ojSelectSingle', $.oj.ojSelectBase, {
     }
 
     var newVal = this.options.value;
+    var origVal = this.options.value;
     if (event.type === 'mutate') {
       if (event.detail.remove != null) {
         var keys = event.detail.remove.keys;
@@ -1579,18 +1615,41 @@ oj.__registerWidget('oj.ojSelectSingle', $.oj.ojSelectBase, {
       }
     }
 
-    // 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();
+    var resolveBusyState = this._AddBusyState('ojSelectSingle processing DataProvider event');
+
+    // JET-64632 - DataProvider refresh event can wipe out currently selected value
+    // defer handling the event until the throttle promise (which is hooked into JET's Knockout
+    // throttling timeout) resolves so that we can correctly handle the case where we get both a
+    // new value set and a DP event
+    var throttlePromise = this._GetThrottlePromise();
+    throttlePromise.then(
+      function () {
+        // if the component was released before the promise resolved, simply resolve the busy
+        // state and return
+        if (this._bReleasedResources) {
+          resolveBusyState();
+          return;
+        }
 
-    // if the event wasn't dispatched internally, need to re-set the value now that the label may
-    // be available, or because a mutation event removed a selected value
-    this._setOption('value', newVal);
+        // if the event wasn't dispatched internally, and if the value has not been changed since
+        // the event was received, need to re-set the value now that the label may be available,
+        // or because a mutation event removed a selected value
+        if (origVal === this.options.value) {
+          // 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();
 
-    resolveValueChangeFunc();
+          this._setOption('value', newVal);
+
+          resolveValueChangeFunc();
+        }
 
-    this._abstractLovBase.handleDataProviderEvent(event);
+        this._abstractLovBase.handleDataProviderEvent(event);
+
+        resolveBusyState();
+      }.bind(this)
+    );
   },
 
   /**

package/dist/js/libs/oj/debug_esm/ojtable.js

@@ -3209,22 +3209,31 @@ Table.prototype._refreshTableBodyRow = function (
           this._styleTableBodyRow(tableBodyRow, false);
 
           // set the cell attributes and styling.
-          var tableBodyCells = this._getTableElementsByTagName(tableBodyRow, Table.DOM_ELEMENT._TD);
-          var tableBodyCellsCount = tableBodyCells.length;
-          var tableBodyCell;
-          for (let i = 0; i < tableBodyCellsCount; i++) {
-            tableBodyCell = tableBodyCells[i];
-            this._setTableBodyCellAttributes(rowIdx, row[Table._CONST_KEY], i, tableBodyCell);
-            this._styleTableBodyCell(i, tableBodyCell, false);
-          }
+          var tableBodyCells = this._getChildElementsByTagName(tableBodyRow, Table.DOM_ELEMENT._TD);
+          var logicalCellArray = this._getColspanLogicalElements(tableBodyCells);
 
-          // sort the re-ordered columns in place
+          // sort the re-ordered columns in place BEFORE applying column styling
           if (this._columnsDestMap != null) {
             for (let i = 0; i < this._columnsDestMap.length; i++) {
-              var moveTableBodyCell = tableBodyCells[this._columnsDestMap[i]];
+              var moveTableBodyCell = logicalCellArray[this._columnsDestMap[i]];
               moveTableBodyCell.parentNode.appendChild(moveTableBodyCell); // @HTMLUpdateOK
             }
+            // requery the cells as the ordering now matches the current columns array
+            tableBodyCells = this._getChildElementsByTagName(tableBodyRow, Table.DOM_ELEMENT._TD);
+            logicalCellArray = this._getColspanLogicalElements(tableBodyCells);
+          }
+
+          // track which cells have been updated / styled in cases of colspans
+          var styledCells = [];
+          for (let i = 0; i < logicalCellArray.length; i++) {
+            var tableBodyCell = logicalCellArray[i];
+            if (styledCells.indexOf(tableBodyCell) === -1) {
+              this._setTableBodyCellAttributes(rowIdx, row[Table._CONST_KEY], i, tableBodyCell);
+              this._styleTableBodyCell(i, tableBodyCell, false);
+              styledCells.push(tableBodyCell);
+            }
           }
+
           return this._finalizeTableBodyCellsRefresh(
             tableBodyRow,
             row,
@@ -7491,13 +7500,14 @@ TableLayoutManager.prototype._handleScrollerScrollTop = function (scrollTop) {
  * @private
  */
 TableLayoutManager.prototype.registerScrollListeners = function () {
-  var scrollEventElement = getScrollEventElement(this.getScroller());
+  var scroller = this.getScroller();
+  var scrollEventElement = getScrollEventElement(scroller);
   if (scrollEventElement != null) {
     // if width or height is defined then we can have scrollbars so register scroll event listeners
     if (this._scrollEventListener == null) {
       this._scrollEventListener = function (event) {
-        var newScrollLeft = this._table._getElementScrollLeft(event.target);
-        var newScrollTop = event.target.scrollTop;
+        var newScrollLeft = this._table._getElementScrollLeft(scroller);
+        var newScrollTop = scroller.scrollTop;
         if (newScrollLeft === this._table._scrollLeft && newScrollTop === this._table._scrollTop) {
           // discard bogus scroll event
           return;
@@ -7855,7 +7865,7 @@ TableLayoutManager.prototype._removeTableDimensionsStyling = function () {
   var tableFooterRow = this._table._getTableFooterRow();
   var tableBody = this._table._getTableBody();
   var tableBottomSlot = this._table._getTableBottomSlot();
-  var tableScroller = this.getScroller();
+  var tableScroller = this._table._getTableScroller();
 
   var tableContainer = this._table._getTableContainer();
   tableContainer.classList.remove(Table.CSS_CLASSES._TABLE_SCROLL_VERTICAL_CLASS);
@@ -10028,7 +10038,7 @@ TableStickyLayoutManager.prototype._updateStickyRowTops = function () {
     for (i = 0; i < tableBodyRows.length; i++) {
       var isSticky = false;
       var tableBodyRow = tableBodyRows[i];
-      var rowCells = this._table._getTableElementsByTagName(tableBodyRow, Table.DOM_ELEMENT._TD);
+      var rowCells = this._table._getChildElementsByTagName(tableBodyRow, Table.DOM_ELEMENT._TD);
       if (tableBodyRow.classList.contains(Table.CSS_CLASSES._TABLE_STICKY_ROW_CLASS)) {
         isSticky = true;
       }
@@ -11240,6 +11250,8 @@ TableContentsLayoutManager.prototype._applyColumnWidths = function () {
         }
       }
     }
+  } else {
+    tableElem.style[Table.CSS_PROP._WIDTH] = '';
   }
   return overallWidth;
 };
@@ -11251,6 +11263,9 @@ TableContentsLayoutManager.prototype._setAllColumnWidths = function (availableWi
   var i;
   var columns = this._table._getColumnDefs();
   var columnsCount = columns.length;
+  if (columnsCount === 0) {
+    return 0;
+  }
 
   var totalPreferredWidth = 0; // total of all data column widths if set to their preferred or forced values
   var totalWorkingWeight = 0; // total weight of all non-forced data columns
@@ -11629,6 +11644,8 @@ TableFixedLayoutManager.prototype._applyColumnWidths = function () {
   if (overallWidth > 0) {
     tableElem.style[Table.CSS_PROP._WIDTH] = overallWidth + Table.CSS_VAL._PX;
     tableElem.style['table-layout'] = 'fixed';
+  } else {
+    tableElem.style[Table.CSS_PROP._WIDTH] = '';
   }
 };
 
@@ -11639,6 +11656,9 @@ TableFixedLayoutManager.prototype._setAllColumnWidths = function (availableWidth
   var i = 0;
   var columns = this._table._getColumnDefs();
   var columnsCount = columns.length;
+  if (columnsCount === 0) {
+    return 0;
+  }
 
   var totalWorkingWeight = 0; // total weight of all non-forced data columns
   var forcedTotalWidth = 0; // total width of all forced data columns
@@ -15523,6 +15543,9 @@ Table.prototype._moveTableHeaderColumn = function (columnIdxs, destIdx, event) {
   this._columnDefArray.splice(destColIdx + 1, 0, ...columnDefs);
   this._columnsDestMap.splice(destColIdx + 1, 0, ...columnsDestMapItems);
 
+  // clean up / reapply column selection in case colspans are present
+  this._updateSelectionStylingFromColumnReorder();
+
   // clone the array so we can trigger that it's changed
   this.option('columns', clonedColumnsOption, {
     _context: {
@@ -15771,10 +15794,12 @@ Table.prototype._setTableColumnCellsClass = function (columnIdx, add, styleClass
       var tableBodyRowsCount = tableBodyRows.length;
       for (i = 0; i < tableBodyRowsCount; i++) {
         var tableBodyCell = this._getTableBodyCell(i, columnIdx, null);
-        if (!add) {
-          tableBodyCell.classList.remove(styleClass);
-        } else {
-          tableBodyCell.classList.add(styleClass);
+        if (tableBodyCell != null) {
+          if (!add) {
+            tableBodyCell.classList.remove(styleClass);
+          } else {
+            tableBodyCell.classList.add(styleClass);
+          }
         }
       }
     }
@@ -16010,7 +16035,7 @@ Table.prototype._styleTableFooter = function (tableFooter) {
     return;
   }
   tableFooter.classList.add(Table.CSS_CLASSES._TABLE_FOOTER_CLASS);
-  var tableFooterRow = this._getTableElementsByTagName(tableFooter, Table.DOM_ELEMENT._TR)[0];
+  var tableFooterRow = this._getChildElementsByTagName(tableFooter, Table.DOM_ELEMENT._TR)[0];
   tableFooterRow.classList.add(Table.CSS_CLASSES._TABLE_FOOTER_ROW_CLASS);
   tableFooterRow.setAttribute(Context._OJ_CONTEXT_ATTRIBUTE, ''); // @HTMLUpdateOK
 };
@@ -16074,7 +16099,7 @@ Table.prototype._styleTableHeader = function (tableHeader) {
   tableHeader.classList.add(Table.CSS_CLASSES._TABLE_HEADER_CLASS);
   // eslint-disable-next-line no-param-reassign
   tableHeader.style[Table.CSS_PROP._DISPLAY] = 'table-header-group';
-  var tableHeaderRow = this._getTableElementsByTagName(tableHeader, Table.DOM_ELEMENT._TR)[0];
+  var tableHeaderRow = this._getChildElementsByTagName(tableHeader, Table.DOM_ELEMENT._TR)[0];
   tableHeaderRow.classList.add(Table.CSS_CLASSES._TABLE_HEADER_ROW_CLASS);
   tableHeaderRow.style[Table.CSS_PROP._POSITION] = Table.CSS_VAL._RELATIVE;
   tableHeaderRow.setAttribute(Context._OJ_CONTEXT_ATTRIBUTE, ''); // @HTMLUpdateOK
@@ -16447,6 +16472,26 @@ Table.prototype._getChildElementByClassName = function (parentElement, className
   return null;
 };
 
+/**
+ * Get the child DOM elements by tag name
+ * @param {Element} parentElement parent element
+ * @param {string} name tagName name to match on
+ * @return {Array<Element>} returns the child DOM elements
+ * @private
+ */
+Table.prototype._getChildElementsByTagName = function (parentElement, tagName) {
+  var childElements = [];
+  if (parentElement.childNodes != null && parentElement.childNodes.length > 0) {
+    for (var i = 0; i < parentElement.childNodes.length; i++) {
+      var childTagName = parentElement.childNodes[i].tagName;
+      if (childTagName != null && childTagName.toLowerCase() === tagName) {
+        childElements.push(parentElement.childNodes[i]);
+      }
+    }
+  }
+  return childElements;
+};
+
 /**
  * Get descendant elements by class name. Only those directly owned by this table (or clone of) is included.
  * @param {Element} parentElement parent element
@@ -21955,6 +22000,23 @@ Table.prototype._updateSelectionStateFromEventDetailChange = function (eventDeta
   }
 };
 
+/**
+ * @private
+ */
+Table.prototype._updateSelectionStylingFromColumnReorder = function () {
+  var selected = this.option('selected');
+  var columnKeySet = selected.column;
+
+  var headers = this._getTableHeaderColumns();
+  headers.forEach(function (header, index) {
+    if (columnKeySet.has(this._getColumnKeyForColumnIdx(index))) {
+      this._setColumnState(index, true);
+    } else {
+      this._setColumnState(index, false);
+    }
+  }, this);
+};
+
 /**
  * @param {boolean=} isOptionUpdate
  * @private

package/dist/js/libs/oj/main-template.js

@@ -15,9 +15,9 @@
   requirejs.config({
     // Path mappings for the logical module names
     paths: {
-      'ojs': 'libs/oj/16.0.0/min@insertESLevelPath@',
-      'ojL10n': 'libs/oj/16.0.0/ojL10n',
-      'ojtranslations': 'libs/oj/16.0.0/resources',
+      'ojs': 'libs/oj/16.0.2/min@insertESLevelPath@',
+      'ojL10n': 'libs/oj/16.0.2/ojL10n',
+      'ojtranslations': 'libs/oj/16.0.2/resources',
       
   'knockout': 'libs/knockout/knockout-3.5.1',
   'jquery': 'libs/jquery/jquery-3.6.4.min',