@oracle/oraclejet 16.0.0 → 16.0.2

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

@@ -22,7 +22,7 @@ define(['exports', 'ojs/ojeditablevalue', 'ojs/ojpopupcore', 'ojs/ojinputtext',
     // 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;
@@ -46,6 +46,7 @@ define(['exports', 'ojs/ojeditablevalue', 'ojs/ojpopupcore', 'ojs/ojinputtext',
     this._isValueForPlaceholderFunc = options.isValueForPlaceholderFunc;
     this._isShowValueInFilterFieldFunc = options.isShowValueInFilterFieldFunc;
     this._getFilterInputElemFunc = options.getFilterInputElemFunc;
+    this._matchBy = options.matchBy;
 
     this._lastDataProviderPromise = null;
 
@@ -63,6 +64,10 @@ define(['exports', 'ojs/ojeditablevalue', 'ojs/ojpopupcore', 'ojs/ojinputtext',
     this._value = value;
   };
 
+  AbstractLovBase.prototype.setMatchBy = function (matchBy) {
+    this._matchBy = matchBy;
+  };
+
   AbstractLovBase.prototype.getFetchType = function () {
     return this._fetchType;
   };
@@ -464,6 +469,7 @@ define(['exports', 'ojs/ojeditablevalue', 'ojs/ojpopupcore', 'ojs/ojinputtext',
 
     var filterCriteria = null;
     if (term) {
+      var matchBy;
       if (this._dataProvider) {
         var filterCapability = this._dataProvider.getCapability('filter');
         if (!filterCapability || !filterCapability.textFilter) {
@@ -471,12 +477,43 @@ define(['exports', 'ojs/ojeditablevalue', 'ojs/ojpopupcore', 'ojs/ojinputtext',
             '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;
+              }
+              Logger.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(
@@ -2532,7 +2569,7 @@ define(['exports', 'ojs/ojeditablevalue', 'ojs/ojpopupcore', 'ojs/ojinputtext',
    * @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",
@@ -2873,7 +2910,38 @@ define(['exports', 'ojs/ojeditablevalue', 'ojs/ojpopupcore', 'ojs/ojinputtext',
        * @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
     },
 
     /**
@@ -3112,6 +3180,12 @@ define(['exports', 'ojs/ojeditablevalue', 'ojs/ojpopupcore', 'ojs/ojinputtext',
 
       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();
 
@@ -3251,7 +3325,8 @@ define(['exports', 'ojs/ojeditablevalue', 'ojs/ojpopupcore', 'ojs/ojinputtext',
         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;
 
@@ -4279,6 +4354,16 @@ define(['exports', 'ojs/ojeditablevalue', 'ojs/ojpopupcore', 'ojs/ojinputtext',
       oj.Assert.failedInAbstractFunction();
     },
 
+    /**
+     * Called when the filter field is blurred.
+     * @memberof! oj.ojSelectBase
+     * @instance
+     * @protected
+     */
+    _HandleFilterFieldBlur: function () {
+      oj.Assert.failedInAbstractFunction();
+    },
+
     /**
      * @memberof! oj.ojSelectBase
      * @instance
@@ -4512,6 +4597,11 @@ define(['exports', 'ojs/ojeditablevalue', 'ojs/ojpopupcore', 'ojs/ojinputtext',
             var focusInFilterField =
               document.activeElement && DomUtils.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();
             }
           }
@@ -4948,46 +5038,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) {
@@ -5013,7 +5127,15 @@ define(['exports', 'ojs/ojeditablevalue', 'ojs/ojpopupcore', 'ojs/ojinputtext',
         }
       }
 
-      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.
@@ -5198,6 +5320,14 @@ define(['exports', 'ojs/ojeditablevalue', 'ojs/ojpopupcore', 'ojs/ojinputtext',
         // 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/ojselectsingle.js

@@ -90,6 +90,9 @@ var __oj_select_single_metadata =
     "labelledBy": {
       "type": "string"
     },
+    "matchBy": {
+      "type": "Array<string>"
+    },
     "messagesCustom": {
       "type": "Array<Object>",
       "writeback": true,
@@ -818,7 +821,11 @@ var __oj_select_single_metadata =
      * @override
      */
     _ReleaseSelectResources: function (shouldRetainMainFieldElem) {
+      this._bReleasingSelectResources = true;
+
       this._super(shouldRetainMainFieldElem);
+
+      this._bReleasingSelectResources = false;
     },
 
     /**
@@ -881,6 +888,34 @@ var __oj_select_single_metadata =
       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
@@ -1560,6 +1595,7 @@ var __oj_select_single_metadata =
       }
 
       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;
@@ -1575,18 +1611,41 @@ var __oj_select_single_metadata =
         }
       }
 
-      // 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/ojtable.js

@@ -3188,22 +3188,31 @@ var __oj_table_metadata =
             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,
@@ -7470,13 +7479,14 @@ var __oj_table_metadata =
    * @private
    */
   TableLayoutManager.prototype.registerScrollListeners = function () {
-    var scrollEventElement = DataCollectionUtils.getScrollEventElement(this.getScroller());
+    var scroller = this.getScroller();
+    var scrollEventElement = DataCollectionUtils.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;
@@ -7834,7 +7844,7 @@ var __oj_table_metadata =
     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);
@@ -10007,7 +10017,7 @@ var __oj_table_metadata =
       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;
         }
@@ -11219,6 +11229,8 @@ var __oj_table_metadata =
           }
         }
       }
+    } else {
+      tableElem.style[Table.CSS_PROP._WIDTH] = '';
     }
     return overallWidth;
   };
@@ -11230,6 +11242,9 @@ var __oj_table_metadata =
     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
@@ -11608,6 +11623,8 @@ var __oj_table_metadata =
     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] = '';
     }
   };
 
@@ -11618,6 +11635,9 @@ var __oj_table_metadata =
     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
@@ -15502,6 +15522,9 @@ var __oj_table_metadata =
     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: {
@@ -15750,10 +15773,12 @@ var __oj_table_metadata =
         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);
+            }
           }
         }
       }
@@ -15989,7 +16014,7 @@ var __oj_table_metadata =
       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
   };
@@ -16053,7 +16078,7 @@ var __oj_table_metadata =
     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
@@ -16426,6 +16451,26 @@ var __oj_table_metadata =
     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
@@ -21934,6 +21979,23 @@ var __oj_table_metadata =
     }
   };
 
+  /**
+   * @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