@oracle/oraclejet 15.1.2 → 15.1.4

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

@@ -2567,6 +2567,16 @@ var __oj_table_metadata =
       // replace existing col elements
       var tableColGroup = this._getTableColGroup();
       if (tableColGroup != null) {
+        // ensure body and footer are hidden before modifying / removing existing col elements
+        var tableBody = this._getTableBody();
+        if (tableBody != null) {
+          tableBody.style[Table.CSS_PROP._VISIBILITY] = Table.CSS_VAL._HIDDEN;
+        }
+        var tableFooter = this._getTableFooter();
+        if (tableFooter != null) {
+          tableFooter.style[Table.CSS_PROP._VISIBILITY] = Table.CSS_VAL._HIDDEN;
+        }
+
         $(tableColGroup).empty();
         if (this._isGutterStartColumnEnabled()) {
           let tableGutterCol = this._createTableGutterCol();
@@ -2624,7 +2634,7 @@ var __oj_table_metadata =
         var column = columns[i];
         var headerRenderer = this._getColumnRenderer(i, 'header');
         if (headerRenderer) {
-          headerColumn = this._createTableHeaderColumn(i, true);
+          headerColumn = this._createTableHeaderColumn(i);
           // if headerRenderer is defined then call that
           var headerContext = this._getRendererContextObject(headerColumn, {});
           // Copy additional properties to top-level context to work with custom element
@@ -2646,7 +2656,12 @@ var __oj_table_metadata =
               self._columnHeaderDefaultRenderer(this, delegateRenderer);
             };
           }
-          if (!DataCollectionUtils.applyRendererContent(headerColumn, headerRenderer(context))) {
+          var rendererContent = headerRenderer(context);
+          if (rendererContent != null) {
+            // if the renderer returned a value then we clear the default content
+            $(headerColumn).empty();
+          }
+          if (!DataCollectionUtils.applyRendererContent(headerColumn, rendererContent)) {
             // if the renderer didn't append content then the existing
             // headerColumn was manipulated. So get it and set the required
             // attributes just in case it was replaced or the attributes
@@ -2715,6 +2730,10 @@ var __oj_table_metadata =
         );
       }
       this._renderedTableHeaderColumns = true;
+
+      // optimize initial sizing for state between fetch start and refreshTableDimensions call
+      this._getLayoutManager().optimizeInitialColumnWidths();
+
       return this._finalizeNonBodyRowRendering([tableHeaderRow]);
     } catch (renderError) {
       return Promise.reject(renderError);
@@ -7271,6 +7290,12 @@ var __oj_table_metadata =
    */
   TableLayoutManager.prototype.refreshTableDimensions = function () {};
 
+  /**
+   * Refresh the table dimensions
+   * @private
+   */
+  TableLayoutManager.prototype.optimizeInitialColumnWidths = function () {};
+
   /**
    * @private
    */
@@ -9864,16 +9889,7 @@ var __oj_table_metadata =
       tableElem.style[Table.CSS_PROP._WIDTH] = overallWidth + Table.CSS_VAL._PX;
       tableElem.style['table-layout'] = 'fixed';
     }
-    let gutterWidth = 0;
-    if (this._table._isGutterStartColumnEnabled()) {
-      gutterWidth += this._table._getTableGutterWidth('start');
-    }
-    if (this._table._isGutterEndColumnEnabled()) {
-      gutterWidth += this._table._getTableGutterWidth('end');
-    }
-    if (gutterWidth > 0) {
-      tableElem.style[Table.CSS_PROP._WIDTH] = overallWidth + gutterWidth + Table.CSS_VAL._PX;
-    }
+
     this._applyHeaderWrapperClass();
     this._initializeFrozenColumns(true);
     this._updateStickyRowTops();
@@ -10009,9 +10025,9 @@ var __oj_table_metadata =
    * @private
    */
   TableStickyLayoutManager.prototype._removeHeaderColumnAndCellColumnWidths = function () {
-    var columnsCount = this._table._getColumnDefs().length;
-    for (var i = 0; i < columnsCount; i++) {
-      var tableCol = this._table._getTableCol(i);
+    var colElements = this._table._getTableCols();
+    for (var i = 0; i < colElements.length; i++) {
+      var tableCol = colElements[i];
       tableCol.style[Table.CSS_PROP._WIDTH] = '';
       tableCol.style[Table.CSS_PROP._DISPLAY] = '';
     }
@@ -10042,15 +10058,25 @@ var __oj_table_metadata =
     var columnsCount = columns.length;
 
     var totalWidth = this._selectorColWidth != null ? this._selectorColWidth : 0;
+    if (this._table._isGutterStartColumnEnabled()) {
+      const gutterStartWidth = this._table._getTableGutterWidth('start');
+      totalWidth += gutterStartWidth;
+    }
+    if (this._table._isGutterEndColumnEnabled()) {
+      const gutterEndWidth = this._table._getTableGutterWidth('end');
+      totalWidth += gutterEndWidth;
+    }
     this._appliedColumnWidths = [];
 
     for (var i = 0; i < columnsCount; i++) {
-      var tableCol = this._table._getTableCol(i);
       var colWidth = this._columnInitWidths[i];
-      tableCol.style[Table.CSS_PROP._WIDTH] = colWidth + Table.CSS_VAL._PX;
-      if (colWidth === 0) {
-        // set the display value to none or else the following column will not be shown
-        tableCol.style[Table.CSS_PROP._DISPLAY] = Table.CSS_VAL._NONE;
+      var tableCol = this._table._getTableCol(i);
+      if (tableCol != null) {
+        tableCol.style[Table.CSS_PROP._WIDTH] = colWidth + Table.CSS_VAL._PX;
+        if (colWidth === 0) {
+          // set the display value to none or else the following column will not be shown
+          tableCol.style[Table.CSS_PROP._DISPLAY] = Table.CSS_VAL._NONE;
+        }
       }
       this._appliedColumnWidths[i] = colWidth;
       totalWidth += colWidth;
@@ -11023,6 +11049,38 @@ var __oj_table_metadata =
     this._columnMaxWidths = null;
   };
 
+  /**
+   * Refresh the table dimensions
+   * @private
+   */
+  TableFixedLayoutManager.prototype.optimizeInitialColumnWidths = function () {
+    var tableContainer = this._table._getTableContainer();
+    this._clearAllCache();
+
+    var tableElem = this._table._getTable();
+
+    this.clearCachedDimensions();
+    this._removeTableDimensionsStyling();
+
+    var overallWidth;
+    // this shouldn't be necessary, but safari has a bug where it does not recalculate the table column widths
+    // correctly when the DOM surrounding it is cleaned up without doing something to force a reflow on the table
+    if (DataCollectionUtils.isSafari()) {
+      tableElem.classList.remove(Table.CSS_CLASSES._TABLE_ELEMENT_CLASS);
+      overallWidth = tableElem.offsetWidth;
+      tableElem.classList.add(Table.CSS_CLASSES._TABLE_ELEMENT_CLASS);
+    }
+
+    this._table._styleTableContainer(tableContainer);
+    this._initializeColumnLayouts();
+
+    overallWidth = this._determineColumnWidths();
+    if (overallWidth > 0) {
+      tableElem.style[Table.CSS_PROP._WIDTH] = overallWidth + Table.CSS_VAL._PX;
+      tableElem.style['table-layout'] = 'fixed';
+    }
+  };
+
   /**
    * Ensures the preferred column width variables are populated. Also resets the inner Table element's styling
    * if required. Returns true iff the inner Table element's styling was reset. Returns false otherwise.
@@ -11036,18 +11094,8 @@ var __oj_table_metadata =
     if (this._table._isDefaultSelectorEnabled()) {
       if (this._selectorColWidth == null) {
         isResetTableElemStyle = true;
-        var headerSelector = this._table._getTableSelectorColumn();
-        if (headerSelector != null) {
-          // offsetWidth does not include partial px values, so bounding rect should be used
-          this._selectorColWidth = headerSelector.getBoundingClientRect().width;
-        } else {
-          var tableBodyRow = this._table._getTableBodyRow(0);
-          var selectorCell = this._table._getTableBodySelectorCell(tableBodyRow);
-          if (selectorCell != null) {
-            // offsetWidth does not include partial px values, so bounding rect should be used
-            this._selectorColWidth = selectorCell.getBoundingClientRect().width;
-          }
-        }
+        // add 1 to the selector width value due to vertical border presence / spacing
+        this._selectorColWidth = this._getPixelStyleEquivalent('2.75rem') + 1;
       }
     } else if (this._selectorColWidth != null) {
       isResetTableElemStyle = true;
@@ -11172,6 +11220,16 @@ var __oj_table_metadata =
 
     var totalWidth = this._selectorColWidth != null ? this._selectorColWidth : 0;
     var forcedTotal = totalWidth;
+    if (this._table._isGutterStartColumnEnabled()) {
+      const gutterStartWidth = this._table._getTableGutterWidth('start');
+      totalWidth += gutterStartWidth;
+      forcedTotal += gutterStartWidth;
+    }
+    if (this._table._isGutterEndColumnEnabled()) {
+      const gutterEndWidth = this._table._getTableGutterWidth('end');
+      totalWidth += gutterEndWidth;
+      forcedTotal += gutterEndWidth;
+    }
     var freeWeightTotal = 0;
     var columnWidths = [];
     this._appliedColumnWidths = [];
@@ -11242,12 +11300,14 @@ var __oj_table_metadata =
     }
 
     for (i = 0; i < columnsCount; i++) {
-      var tableCol = this._table._getTableCol(i);
       var colWidth = columnWidths[i];
-      tableCol.style[Table.CSS_PROP._WIDTH] = colWidth + Table.CSS_VAL._PX;
-      if (colWidth === 0) {
-        // set the display value to none or else the following column will not be shown
-        tableCol.style[Table.CSS_PROP._DISPLAY] = Table.CSS_VAL._NONE;
+      var tableCol = this._table._getTableCol(i);
+      if (tableCol != null) {
+        tableCol.style[Table.CSS_PROP._WIDTH] = colWidth + Table.CSS_VAL._PX;
+        if (colWidth === 0) {
+          // set the display value to none or else the following column will not be shown
+          tableCol.style[Table.CSS_PROP._DISPLAY] = Table.CSS_VAL._NONE;
+        }
       }
       this._appliedColumnWidths[i] = colWidth;
     }
@@ -11441,10 +11501,16 @@ var __oj_table_metadata =
       if (activeIndex === -1) {
         // handle select all column header case
         tableHeaderColumn = this._getTableSelectorColumn();
+        if (tableHeaderColumn == null) {
+          return;
+        }
       } else {
         // handle normal column header case
         var headerSelected = false;
         tableHeaderColumn = this._getTableHeaderColumn(activeIndex);
+        if (tableHeaderColumn == null) {
+          return;
+        }
         var selectedHeaderIdxs = this._getSelectedHeaderColumnIdxs();
         for (i = 0; i < selectedHeaderIdxs.length; i++) {
           if (selectedHeaderIdxs[i] === activeIndex) {
@@ -11464,7 +11530,7 @@ var __oj_table_metadata =
           } else {
             stateInfo += this.getTranslatedString('accessibleSortDescending', { id: '' }) + ' ';
           }
-        } else if (column.sortable === Table._OPTION_ENABLED) {
+        } else if (column != null && column.sortable === Table._OPTION_ENABLED) {
           stateInfo += this.getTranslatedString('accessibleSortable', { id: '' }) + ' ';
         }
       }
@@ -11487,10 +11553,16 @@ var __oj_table_metadata =
       if (activeIndex === -1) {
         // handle select all column footer case
         tableFooterCell = this._getTableFooterSelectorCell();
+        if (tableFooterCell == null) {
+          return;
+        }
       } else {
         // handle normal column footer case
         var footerSelected = false;
         tableFooterCell = this._getTableFooterCell(activeIndex);
+        if (tableFooterCell == null) {
+          return;
+        }
         var selectedFooterIdxs = this._getSelectedFooterColumnIdxs();
         for (i = 0; i < selectedFooterIdxs.length; i++) {
           if (selectedFooterIdxs[i] === activeIndex) {
@@ -11519,12 +11591,18 @@ var __oj_table_metadata =
         columnIndex = 0;
       }
       var activeRowElem = this._getTableBodyRow(activeIndex);
+      if (activeRowElem == null) {
+        return;
+      }
       // get 'active' cell in Table
       if (columnIndex === -1) {
         tableCell = this._getTableBodySelectorCell(activeRowElem);
       } else {
         tableCell = this._getTableBodyLogicalCells(null, activeRowElem)[columnIndex];
       }
+      if (tableCell == null) {
+        return;
+      }
 
       // update row context information if changed
       if (activeIndex !== this._accRowIndex || this._accFirstFocus !== false) {
@@ -11576,9 +11654,7 @@ var __oj_table_metadata =
       // populate cell information
       if (columnIndex === -1) {
         // handle row selector cell
-        if (tableCell != null) {
-          label += this._getAccSelectorString(activeRowElem) + ' ';
-        }
+        label += this._getAccSelectorString(activeRowElem) + ' ';
       } else {
         tableHeaderColumn = this._getTableHeaderColumn(columnIndex);
         if (tableHeaderColumn != null) {
@@ -14476,17 +14552,28 @@ var __oj_table_metadata =
   /**
    * @private
    */
-  Table.prototype._getTableCol = function (columnIdx) {
+  Table.prototype._getTableCols = function () {
+    var cols = [];
     var tableColGroup = this._getTableColGroup();
     if (tableColGroup != null) {
-      var tableColElements = this._getTableElementsByClassName(
-        tableColGroup,
-        Table.CSS_CLASSES._TABLE_COL_CLASS
-      );
-      if (tableColElements.length > 0) {
-        return tableColElements[columnIdx];
+      var children = tableColGroup.children;
+      for (var i = 0; i < children.length; i++) {
+        if (children[i].classList.contains(Table.CSS_CLASSES._TABLE_COL_CLASS)) {
+          cols.push(children[i]);
+        }
       }
     }
+    return cols;
+  };
+
+  /**
+   * @private
+   */
+  Table.prototype._getTableCol = function (columnIdx) {
+    var tableColElements = this._getTableCols();
+    if (tableColElements.length > 0) {
+      return tableColElements[columnIdx];
+    }
     return null;
   };
 
@@ -18334,39 +18421,45 @@ var __oj_table_metadata =
         existingCurrentRow == null ||
         (existingCurrentRow.rowKey == null && existingCurrentRow.rowIndex == null);
       if (!isExistingCurrentRowClear) {
-        var existingCurrentRowIndex = existingCurrentRow.rowIndex;
-        var existingCurrentRowKey = this._getRowKeyForDataSourceRowIndex(existingCurrentRowIndex);
+        var existingCurrentRowKey = existingCurrentRow.rowKey;
         var existingCurrentRowIdx = this._getRowIdxForRowKey(existingCurrentRowKey);
 
-        var updateEditable = this._setTableEditable(false, false, 0, true, event);
-        if (updateEditable instanceof Promise) {
-          return updateEditable.then(
-            function (value) {
-              if (value === false) {
-                this._resetCurrentRow(existingCurrentRow, existingCurrentRowIdx, event);
-                return Table._CURRENT_ROW_STATUS._IGNORED;
-              }
-              var existingBodyRow = this._getTableBodyRow(existingCurrentRowIdx);
-              if (existingBodyRow != null) {
-                existingBodyRow.classList.remove(Table.CSS_CLASSES._TABLE_DATA_CURRENT_ROW_CLASS);
-              }
-              this._currentRow = updatedCurrentRow;
+        // end editing if the currently editable rowKey doesn't match the new current rowKey
+        if (
+          this._hasEditableRow() &&
+          (updatedCurrentRow == null ||
+            !oj.KeyUtils.equals(existingCurrentRowKey, updatedCurrentRow.rowKey))
+        ) {
+          var updateEditable = this._setTableEditable(false, false, 0, true, event);
+          if (updateEditable instanceof Promise) {
+            return updateEditable.then(
+              function (value) {
+                if (value === false) {
+                  this._resetCurrentRow(existingCurrentRow, existingCurrentRowIdx, event);
+                  return Table._CURRENT_ROW_STATUS._IGNORED;
+                }
+                var existingBodyRow = this._getTableBodyRow(existingCurrentRowIdx);
+                if (existingBodyRow != null) {
+                  existingBodyRow.classList.remove(Table.CSS_CLASSES._TABLE_DATA_CURRENT_ROW_CLASS);
+                }
+                this._currentRow = updatedCurrentRow;
 
-              this._updateCurrentRow(isClearCurrentRow, localRowIndex, event);
-              if (event == null) {
-                // only scroll to the new current row and highlight it if the Table has focus
-                this._setActiveRow(localRowIndex, event, false, !this._hasFocus());
-              }
-              return Table._CURRENT_ROW_STATUS._UPDATED;
-            }.bind(this),
-            function () {
-              this._resetCurrentRow(existingCurrentRow, existingCurrentRowIdx, event);
-              return Table._CURRENT_ROW_STATUS._VETOED;
-            }.bind(this)
-          );
-        } else if (updateEditable === false) {
-          this._resetCurrentRow(existingCurrentRow, existingCurrentRowIdx, event);
-          return Table._CURRENT_ROW_STATUS._VETOED;
+                this._updateCurrentRow(isClearCurrentRow, localRowIndex, event);
+                if (event == null) {
+                  // only scroll to the new current row and highlight it if the Table has focus
+                  this._setActiveRow(localRowIndex, event, false, !this._hasFocus());
+                }
+                return Table._CURRENT_ROW_STATUS._UPDATED;
+              }.bind(this),
+              function () {
+                this._resetCurrentRow(existingCurrentRow, existingCurrentRowIdx, event);
+                return Table._CURRENT_ROW_STATUS._VETOED;
+              }.bind(this)
+            );
+          } else if (updateEditable === false) {
+            this._resetCurrentRow(existingCurrentRow, existingCurrentRowIdx, event);
+            return Table._CURRENT_ROW_STATUS._VETOED;
+          }
         }
         var existingBodyRow = this._getTableBodyRow(existingCurrentRowIdx);
         if (existingBodyRow != null) {

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

@@ -894,9 +894,28 @@ define(['require', 'exports', 'preact/compat', 'preact/jsx-runtime', 'preact', '
             if (isTemplateSlot) {
                 if (slotNodes[0]?.nodeName === 'TEMPLATE') {
                     const templateNode = slotNodes[0];
-                    propContainer[propName] =
-                        templateNode['render'] ??
-                            this._getSlotRenderer(templateNode, propName, containerPropName);
+                    let renderer = templateNode['render'];
+                    if (renderer) {
+                        propContainer[propName] = renderer;
+                        Object.defineProperties(templateNode, {
+                            render: {
+                                enumerable: true,
+                                get: () => {
+                                    return renderer;
+                                },
+                                set: (newRenderer) => {
+                                    renderer = newRenderer;
+                                    if (newRenderer) {
+                                        this._updateProps([propName], newRenderer);
+                                        this._queueRender();
+                                    }
+                                }
+                            }
+                        });
+                    }
+                    else {
+                        propContainer[propName] = this._getSlotRenderer(templateNode, propName, containerPropName);
+                    }
                 }
                 else {
                     throw new ojcustomelementUtils.JetElementError(this._element, `Slot content for template slot ${slotName} must be a template element.`);

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

@@ -437,6 +437,11 @@ class CachedIteratorResultsDataProvider {
         });
     }
     fetchFirst(params) {
+        if (params?.signal?.aborted) {
+            const asyncIterable = this.dataProvider.fetchFirst(params);
+            const asyncIterator = asyncIterable[Symbol.asyncIterator]();
+            return new this.CacheAsyncIterable(this, asyncIterator, null, null);
+        }
         if (!CachedIteratorResultsDataProvider._compareCachedFetchParameters(params, this._lastFetchParams)) {
             this.cache.reset();
             this._lastFetchParams = CachedIteratorResultsDataProvider._createCachedFetchParams(params);
@@ -475,6 +480,9 @@ class CachedIteratorResultsDataProvider {
     }
     static _compareCachedFetchParameters(params, cachedParams) {
         params = params || {};
+        if (cachedParams != null && cachedParams.signal?.aborted && !params.signal?.aborted) {
+            return false;
+        }
         return (cachedParams != null &&
             oj.Object.compareValues(cachedParams.attributes, params.attributes || null) &&
             oj.Object.compareValues(cachedParams.filterDef, CachedIteratorResultsDataProvider._getFilterDef(params.filterCriterion)) &&
@@ -491,6 +499,7 @@ class CachedIteratorResultsDataProvider {
         cachedFetchParams.sortCriteria = params.sortCriteria
             ? JSON.parse(JSON.stringify(params.sortCriteria))
             : null;
+        cachedFetchParams.signal = params.signal;
         return cachedFetchParams;
     }
     static _getFilterDef(filter) {

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

@@ -6598,7 +6598,8 @@ function _returnTrue() {
 // override jQuery's cleanData method to bypass cleanup of custom elements and composites
 $.cleanData = (function (orig) {
   return function (elems) {
-    var nonCustomElements = [];
+    const nonCustomElements = [];
+    const customElementsToClean = [];
     for (var i = 0; i < elems.length; i++) {
       var elem = elems[i];
       if (elem == null) {
@@ -6617,11 +6618,14 @@ $.cleanData = (function (orig) {
       }
       if (!bSkip) {
         nonCustomElements.push(elem);
+      } else if (elem.$$cleanElement) {
+        customElementsToClean.push(elem);
       }
     }
     if (nonCustomElements.length > 0) {
       orig(nonCustomElements);
     }
+    customElementsToClean.forEach((item) => item.$$cleanElement());
   };
 })($.cleanData);
 

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

@@ -37,12 +37,12 @@ const oj = {
    * @global
    * @member {string} version JET version numberr
    */
-  version: '15.1.2',
+  version: '15.1.4',
   /**
    * @global
    * @member {string} revision JET source code revision number
    */
-  revision: '2023-11-02_05-11-27',
+  revision: '2023-12-21_15-18-51',
 
   // 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_esm/ojcorerouter.js

@@ -576,18 +576,24 @@ CoreRouter.prototype.sync = function () {
     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) => {
-    // Synchronize the next child router
-    var p = state;
-    var childRouter = this.childRouter;
-    if (childRouter) {
-      p = childRouter.sync();
-    } else if (!this._noHistory) {
-      // Cleanup noHistorySegments after navigating any history-tracking routers
-      noHistorySegments = [];
-    }
-    return p;
-  });
+  return this._execute(route || { path: '', params: {} })
+    .then((state) => {
+      // Synchronize the next child router
+      var p = state;
+      var childRouter = this.childRouter;
+      if (childRouter) {
+        p = childRouter.sync();
+      } else if (!this._noHistory) {
+        // Cleanup noHistorySegments after navigating any history-tracking routers
+        noHistorySegments = [];
+      }
+      return p;
+    })
+    .catch((ex) => {
+      // Clear transitions if transition rejected
+      pendingTransitions = [];
+      throw ex;
+    });
 };
 
 /**
@@ -741,7 +747,7 @@ CoreRouter.prototype.go = function (...transitions) {
       window.history.pushState(null, 'path', newPath);
     }
     goP = this.sync().catch((ex) => {
-      // Rollback transitions if navigation rejected
+      // Clear transitions if transition rejected
       pendingTransitions = [];
       if (this._noHistory) {
         noHistorySegments = prevNoHistorySegments;

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

@@ -186,6 +186,9 @@ DataCollectionUtils.isElementOrAncestorFocusable = function (element, stopCondit
  */
 DataCollectionUtils.handleActionableTab = function (event, element) {
   var focusElems = DataCollectionUtils.getFocusableElementsInNode(element);
+  if (focusElems.length === 1) {
+    return true;
+  }
   if (focusElems.length > 0 && event.target === focusElems[focusElems.length - 1]) {
     // recycle to first focusable element in the cell
     focusElems[0].focus();
@@ -204,6 +207,9 @@ DataCollectionUtils.handleActionableTab = function (event, element) {
  */
 DataCollectionUtils.handleActionablePrevTab = function (event, element) {
   var focusElems = DataCollectionUtils.getFocusableElementsInNode(element);
+  if (focusElems.length === 1) {
+    return true;
+  }
   if (focusElems.length > 0 && event.target === focusElems[0]) {
     // recycle to last focusable element in the cell
     focusElems[focusElems.length - 1].focus();