@oracle/oraclejet 18.0.5 → 18.1.0

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

@@ -2248,8 +2248,8 @@ Table.prototype._cleanComponent = function (isDestroy) {
   // cleanup needed for both, 'destroy()' and 'ReleaseResources()' calls
   this._animateOnFetch = null;
   this._isEditPending = null;
+  this._isApplyingEdit = null;
   this._deferredEditInfo = null;
-  this._focusoutEditKey = null;
   this._skipScrollOnFocus = null;
   this._active = null;
   this._isTableTab = null;
@@ -6548,7 +6548,9 @@ TableDndContext.prototype._cloneTableContainer = function (tableContainer) {
           rowClone,
           Table.CSS_CLASSES._TABLE_DATA_ROW_SELECTOR_CLASS
         )[0];
-        selector.selectedKeys = this.component.options.selected.row;
+        selector.selectedKeys = this.component._getRowKeySetFromSelected(
+          this.component.options.selected
+        );
         selector.rowKey = this.component._getRowKey(row);
       }
 
@@ -10342,6 +10344,14 @@ TableStickyLayoutManager.prototype._removeHeaderColumnAndCellColumnWidths = func
   if (selectorCol != null) {
     selectorCol.style[Table.CSS_PROP._WIDTH] = '';
   }
+  var gutterStartCol = this._table._getTableGutterStartCol();
+  if (gutterStartCol != null) {
+    gutterStartCol.style[Table.CSS_PROP._WIDTH] = '';
+  }
+  var gutterEndCol = this._table._getTableGutterEndCol();
+  if (gutterEndCol != null) {
+    gutterEndCol.style[Table.CSS_PROP._WIDTH] = '';
+  }
   var colElements = this._table._getTableCols();
   for (var i = 0; i < colElements.length; i++) {
     var tableCol = colElements[i];
@@ -11603,13 +11613,15 @@ TableContentsLayoutManager.prototype._setAllColumnWidths = function (
   var newColumnWidths = []; // pending widths of all data columns
   this._appliedColumnWidths = []; // pending (and eventually applied) widths of all data columns
 
+  let gutterStartWidth;
+  let gutterEndWidth;
   var totalWidth = this._selectorColWidth != null ? this._selectorColWidth : 0;
   if (this._table._isGutterStartColumnEnabled()) {
-    const gutterStartWidth = this._table._getTableGutterWidth('start');
+    gutterStartWidth = this._table._getTableGutterWidth('start');
     totalWidth += gutterStartWidth;
   }
   if (this._table._isGutterEndColumnEnabled()) {
-    const gutterEndWidth = this._table._getTableGutterWidth('end');
+    gutterEndWidth = this._table._getTableGutterWidth('end');
     totalWidth += gutterEndWidth;
   }
 
@@ -11692,6 +11704,18 @@ TableContentsLayoutManager.prototype._setAllColumnWidths = function (
       selectorCol.style[Table.CSS_PROP._WIDTH] = this._selectorColWidth + Table.CSS_VAL._PX;
     }
   }
+  if (this._table._isGutterStartColumnEnabled()) {
+    var gutterStartCol = this._table._getTableGutterStartCol();
+    if (gutterStartCol != null) {
+      gutterStartCol.style[Table.CSS_PROP._WIDTH] = gutterStartWidth + Table.CSS_VAL._PX;
+    }
+  }
+  if (this._table._isGutterEndColumnEnabled()) {
+    var gutterEndCol = this._table._getTableGutterEndCol();
+    if (gutterEndCol != null) {
+      gutterEndCol.style[Table.CSS_PROP._WIDTH] = gutterEndWidth + Table.CSS_VAL._PX;
+    }
+  }
   for (i = 0; i < columnsCount; i++) {
     var colWidth = newColumnWidths[i];
     var tableCol = this._table._getTableCol(i);
@@ -12007,13 +12031,15 @@ TableFixedLayoutManager.prototype._setAllColumnWidths = function (
   var newColumnWidths = []; // pending widths of all data columns
   this._appliedColumnWidths = []; // pending (and eventually applied) widths of all data columns
 
+  let gutterStartWidth;
+  let gutterEndWidth;
   var totalWidth = this._selectorColWidth != null ? this._selectorColWidth : 0;
   if (this._table._isGutterStartColumnEnabled()) {
-    const gutterStartWidth = this._table._getTableGutterWidth('start');
+    gutterStartWidth = this._table._getTableGutterWidth('start');
     totalWidth += gutterStartWidth;
   }
   if (this._table._isGutterEndColumnEnabled()) {
-    const gutterEndWidth = this._table._getTableGutterWidth('end');
+    gutterEndWidth = this._table._getTableGutterWidth('end');
     totalWidth += gutterEndWidth;
   }
 
@@ -12077,6 +12103,18 @@ TableFixedLayoutManager.prototype._setAllColumnWidths = function (
       selectorCol.style[Table.CSS_PROP._WIDTH] = this._selectorColWidth + Table.CSS_VAL._PX;
     }
   }
+  if (this._table._isGutterStartColumnEnabled()) {
+    var gutterStartCol = this._table._getTableGutterStartCol();
+    if (gutterStartCol != null) {
+      gutterStartCol.style[Table.CSS_PROP._WIDTH] = gutterStartWidth + Table.CSS_VAL._PX;
+    }
+  }
+  if (this._table._isGutterEndColumnEnabled()) {
+    var gutterEndCol = this._table._getTableGutterEndCol();
+    if (gutterEndCol != null) {
+      gutterEndCol.style[Table.CSS_PROP._WIDTH] = gutterEndWidth + Table.CSS_VAL._PX;
+    }
+  }
   for (i = 0; i < columnsCount; i++) {
     var colWidth = newColumnWidths[i];
     var tableCol = this._table._getTableCol(i);
@@ -12814,7 +12852,7 @@ Table.prototype._handleDataRefresh = function (event) {
           this._getLayoutManager().notifyTableUpdate(Table._UPDATE._ROWS_REMOVED);
           // reset active row to ensure active row index is not stale after refresh
           this._clearActiveRow(null, true);
-          this._removeRowsAfterLastValidRow(event.detail.disregardAfterKey).then(() => {
+          return this._removeRowsAfterLastValidRow(event.detail.disregardAfterKey).then(() => {
             if (!this._hasMoreToFetch()) {
               this._registerDomScroller();
             }
@@ -14242,8 +14280,8 @@ Table.prototype._createTableBodyDefaultSelector = function (rowKey, tableBodyRow
 
   var selector = document.createElement('oj-selector');
   selector.id = this._getTableUID() + '_table_selector_' + rowKey;
-  let rowSelected = this.options.selected.row;
-  if (rowSelected.has(rowKey)) {
+  var rowKeySet = this._getRowKeySetFromSelected(this.options.selected);
+  if (rowKeySet.has(rowKey)) {
     selector.selectedKeys = new KeySetImpl([rowKey]);
   } else {
     selector.selectedKeys = new KeySetImpl();
@@ -14287,7 +14325,7 @@ Table.prototype._createTableHeaderSelectorColumn = function () {
 
   if (this._isSelectAllControlVisible()) {
     var selector = document.createElement('oj-selector');
-    selector.selectedKeys = this.options.selected.row;
+    selector.selectedKeys = this._getRowKeySetFromSelected(this.options.selected);
     selector.setAttribute(Table._DATA_OJ_BINDING_PROVIDER, 'none'); // @HTMLUpdateOK
     selector.classList.add(Table.CSS_CLASSES._TABLE_HEADER_SELECTOR_CLASS);
     selector.setAttribute('selection-mode', 'all');
@@ -15451,6 +15489,35 @@ Table.prototype._getTableSelectorCol = function () {
   return null;
 };
 
+Table.prototype._getTableGutterStartCol = function () {
+  var tableColGroup = this._getTableColGroup();
+  if (
+    tableColGroup != null &&
+    tableColGroup.children != null &&
+    tableColGroup.children.length > 0 &&
+    tableColGroup.children[0].classList.contains(Table.CSS_CLASSES._TABLE_COL_GUTTER_CLASS)
+  ) {
+    return tableColGroup.children[0];
+  }
+  return null;
+};
+
+Table.prototype._getTableGutterEndCol = function () {
+  var tableColGroup = this._getTableColGroup();
+  if (tableColGroup != null && tableColGroup.children != null) {
+    var childCount = tableColGroup.children.length;
+    if (
+      childCount > 0 &&
+      tableColGroup.children[childCount - 1].classList.contains(
+        Table.CSS_CLASSES._TABLE_COL_GUTTER_CLASS
+      )
+    ) {
+      return tableColGroup.children[childCount - 1];
+    }
+  }
+  return null;
+};
+
 /**
  * Return all table column headers
  * @return {Array|null} array of th DOM elements
@@ -17513,7 +17580,6 @@ Table.prototype._handleFocusout = function (event) {
 
   this._setFocusoutBusyState();
   var isClearEditMode = this._hasEditableRow();
-  this._focusoutEditKey = this._getEditableRowKey();
   var isClearActionableMode = this._isTableActionableMode();
 
   // set timeout to stay in editable/actionable mode if focus comes back into the table
@@ -17539,15 +17605,10 @@ Table.prototype._handleFocusout = function (event) {
         this._setTableActionableMode(false, true);
       }
       if (isClearEditMode) {
-        if (this._focusoutEditKey != null) {
-          // only clear edit mode if it was enabled prior to the focusout trigger AND the editRow has not changed
-          this._queueTask(() => {
-            return this._setTableEditable(false, false, 0, true, event);
-          });
-        } else {
-          // otherwise ensure focus remains in the Table if it has not yet been regained and an editrow update is pending
-          table.focus();
-        }
+        this._deferredEditInfo = { editRow: { rowKey: null, rowIndex: -1 }, event };
+        this._queueTask(() => {
+          return this._setEditRow();
+        });
       }
       this._clearFocusoutBusyState();
     }.bind(this),
@@ -17743,13 +17804,17 @@ Table.prototype._events = {
     // ignore key event on the footer or target is editable
     var keyboardCode1 = this._getKeyboardKeys()[0];
 
+    if (this._isPendingEdit()) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
     if (
-      this._isPendingEdit() ||
-      (!isEscapeKeyEvent(keyboardCode1) &&
-        !isEnterKeyEvent(keyboardCode1) &&
-        !isF2KeyEvent(keyboardCode1) &&
-        !isTabKeyEvent(keyboardCode1) &&
-        this._isNodeEditable(event.target))
+      !isEscapeKeyEvent(keyboardCode1) &&
+      !isEnterKeyEvent(keyboardCode1) &&
+      !isF2KeyEvent(keyboardCode1) &&
+      !isTabKeyEvent(keyboardCode1) &&
+      this._isNodeEditable(event.target)
     ) {
       return;
     }
@@ -18189,10 +18254,10 @@ Table.prototype._events = {
         const rowIdx = this._getElementRowIdx(event.target);
         if (rowIdx != null) {
           const rowKey = this._getRowKeyForRowIdx(rowIdx);
+          this._deferredEditInfo = { editRow: { rowKey }, columnIdx, isNext: true, event };
           this._queueTask(() => {
             return this._setEditRow();
           });
-          this._deferredEditInfo = { editRow: { rowKey }, columnIdx };
         }
       }
       this._currentPointerTarget = null;
@@ -18580,11 +18645,16 @@ Table.prototype._registerTouchEvents = function () {
         function (event) {
           return function () {
             var eventTarget = this._getEventTargetElement(event);
-            var columnIdx = this._getElementColumnIdx(eventTarget);
-            this._queueTask(() => {
-              return this._setTableEditable(true, false, columnIdx, true, event);
-            });
-            event.preventDefault();
+            const rowIdx = this._getElementRowIdx(eventTarget);
+            if (rowIdx != null) {
+              const rowKey = this._getRowKeyForRowIdx(rowIdx);
+              var columnIdx = this._getElementColumnIdx(eventTarget);
+              this._deferredEditInfo = { editRow: { rowKey }, columnIdx, isNext: true, event };
+              this._queueTask(() => {
+                return this._setEditRow();
+              });
+              event.preventDefault();
+            }
           }.bind(this);
         }.bind(this)(evt)
       );
@@ -19465,7 +19535,7 @@ Table.prototype._setCurrentRow = function (currentRow, event, optionChange) {
           (value) => {
             if (value === false) {
               this._resetCurrentRow(existingCurrentRow, existingCurrentRowIdx, event);
-              return Table._CURRENT_ROW_STATUS._IGNORED;
+              return Table._CURRENT_ROW_STATUS._VETOED;
             }
             var existingBodyRow = this._getTableBodyRow(existingCurrentRowIdx);
             if (existingBodyRow != null) {
@@ -19507,32 +19577,10 @@ Table.prototype._setCurrentRow = function (currentRow, event, optionChange) {
  */
 Table.prototype._resetCurrentRow = function (existingCurrentRow, existingCurrentRowIdx, event) {
   this._currentRow = existingCurrentRow;
-  var currentFocusElement = document.activeElement;
   var accessibleContext = this._getAccessibleContext();
-  var columnIdx = this._getElementColumnIdx(currentFocusElement);
-  this._queueTask(
-    function () {
-      var focusRowIdx = existingCurrentRowIdx;
-      var focusColumnIdx = columnIdx;
-      if (focusRowIdx != null && focusColumnIdx != null) {
-        // prettier-ignore
-        setTimeout( // @HTMLUpdateOK
-          function () {
-            this._setCellFocus(focusRowIdx, focusColumnIdx);
-          }.bind(this),
-          0
-        );
-      } else if (focusRowIdx != null) {
-        // prettier-ignore
-        setTimeout( // @HTMLUpdateOK
-          function () {
-            this._setActiveRow(focusRowIdx, event);
-          }.bind(this),
-          0
-        );
-      }
-    }.bind(this)
-  );
+  if (existingCurrentRowIdx != null) {
+    this._setActiveRow(existingCurrentRowIdx, event);
+  }
   // restore previous accessible row context if current row is not changing
   this._setAccessibleContext(accessibleContext);
   // do not update the currentRow to the new value if updateEditable returned false
@@ -20872,18 +20920,29 @@ Table.prototype._setEditRow = function () {
       if (this._deferredEditInfo != null) {
         var editRow = this._deferredEditInfo.editRow;
         var columnIdx = this._deferredEditInfo.columnIdx || 0;
+        var isNext = this._deferredEditInfo.isNext;
+        var isCancel = this._deferredEditInfo.isCancel;
+        var event = this._deferredEditInfo.event;
         this._deferredEditInfo = null;
 
         var rowKey = editRow.rowKey;
         var rowIndex = editRow.rowIndex;
-        if (rowKey != null || rowIndex > -1) {
+        if (rowKey != null || (rowIndex != null && rowIndex > -1)) {
+          var localRowIndex = rowIndex;
           // an editable row has to be current also
-          var currentStatus = this._setCurrentRow({ rowKey: rowKey, rowIndex: rowIndex });
+          var currentStatus = this._setCurrentRow({ rowKey: rowKey, rowIndex: rowIndex }, event);
           if (currentStatus instanceof Promise) {
             currentStatus.then(
-              function (value) {
+              (value) => {
                 if (value === Table._CURRENT_ROW_STATUS._UPDATED) {
-                  this._setTableEditable(true, false, columnIdx, true, null).then(
+                  if (rowKey != null) {
+                    localRowIndex = this._getRowIdxForRowKey(rowKey);
+                  }
+                  if (localRowIndex != null) {
+                    this._setActiveRow(localRowIndex, event, true, false, true);
+                    this._scrollRowIntoViewport(localRowIndex, true);
+                  }
+                  this._setTableEditable(true, false, columnIdx, isNext, event).then(
                     () => {
                       this._isEditPending = false;
                       resolve();
@@ -20894,12 +20953,26 @@ Table.prototype._setEditRow = function () {
                     }
                   );
                 } else if (value === Table._CURRENT_ROW_STATUS._IGNORED) {
-                  this._scrollToRowHelper(editRow, columnIdx, resolve);
+                  this._scrollToRowHelper(editRow, columnIdx, isNext, event, resolve);
+                } else {
+                  this._isEditPending = false;
+                  resolve();
                 }
-              }.bind(this)
+              },
+              () => {
+                this._isEditPending = false;
+                resolve();
+              }
             );
           } else if (currentStatus === Table._CURRENT_ROW_STATUS._UPDATED) {
-            this._setTableEditable(true, false, columnIdx, true, null).then(
+            if (rowKey != null) {
+              localRowIndex = this._getRowIdxForRowKey(rowKey);
+            }
+            if (localRowIndex != null) {
+              this._setActiveRow(localRowIndex, event, true, false, true);
+              this._scrollRowIntoViewport(localRowIndex, true);
+            }
+            this._setTableEditable(true, false, columnIdx, isNext, event).then(
               () => {
                 this._isEditPending = false;
                 resolve();
@@ -20910,10 +20983,13 @@ Table.prototype._setEditRow = function () {
               }
             );
           } else if (currentStatus === Table._CURRENT_ROW_STATUS._IGNORED) {
-            this._scrollToRowHelper(editRow, columnIdx, resolve);
+            this._scrollToRowHelper(editRow, columnIdx, isNext, event, resolve);
+          } else {
+            this._isEditPending = false;
+            resolve();
           }
         } else {
-          this._setTableEditable(false, false, 0, true, null).then(
+          this._setTableEditable(false, isCancel, 0, true, event).then(
             () => {
               this._isEditPending = false;
               resolve();
@@ -20933,14 +21009,14 @@ Table.prototype._setEditRow = function () {
 };
 
 Table.prototype._isPendingEdit = function () {
-  return this._isEditPending || this._deferredEditInfo != null;
+  return this._isEditPending || this._deferredEditInfo != null || this._isApplyingEdit;
 };
 
 /**
  * Helper method to scroll to row and invoke _setEditRow
  * @private
  */
-Table.prototype._scrollToRowHelper = function (editRow, columnIdx, resolve) {
+Table.prototype._scrollToRowHelper = function (editRow, columnIdx, isNext, event, resolve) {
   // try to scroll to editRow.rowKey
   const scrollTop = this._scrollTop;
   if (editRow.rowKey != null) {
@@ -20949,7 +21025,7 @@ Table.prototype._scrollToRowHelper = function (editRow, columnIdx, resolve) {
       validationPromise.then(
         (valid) => {
           if (valid) {
-            this._setupEditRowCallback(editRow, columnIdx, scrollTop);
+            this._setupEditRowCallback(editRow, columnIdx, isNext, scrollTop, event);
             this._syncScrollPosition({ rowKey: editRow.rowKey }, true);
           }
           this._isEditPending = false;
@@ -20966,7 +21042,7 @@ Table.prototype._scrollToRowHelper = function (editRow, columnIdx, resolve) {
     }
   } else {
     if (!this._syncScrollPosition({ rowIndex: editRow.rowIndex })) {
-      this._setupEditRowCallback(editRow, columnIdx, scrollTop);
+      this._setupEditRowCallback(editRow, columnIdx, isNext, scrollTop, event);
     }
     this._isEditPending = false;
     resolve();
@@ -20976,15 +21052,16 @@ Table.prototype._scrollToRowHelper = function (editRow, columnIdx, resolve) {
 /**
  * Helper method to setup a scroll callback for honoring an edit row setting.
  */
-Table.prototype._setupEditRowCallback = function (editRow, columnIdx, scrollTop) {
+Table.prototype._setupEditRowCallback = function (editRow, columnIdx, isNext, scrollTop, event) {
   // this will be invoked after scroll and fetch is done
   this._editRowCallback = function () {
     // try again after scroll and fetch
-    if (this._scrollTop !== scrollTop && this._deferredEditInfo == null) {
+    var currentScrollTop = this._getLayoutManager().getScroller().scrollTop;
+    if (currentScrollTop !== scrollTop && this._deferredEditInfo == null) {
+      this._deferredEditInfo = { editRow, columnIdx, isNext, event };
       this._queueTask(() => {
         return this._setEditRow();
       });
-      this._deferredEditInfo = { editRow, columnIdx };
     }
   }.bind(this);
 };
@@ -21019,34 +21096,20 @@ Table.prototype._setEditableRowIdx = function (rowIdx) {
  * Set the next or previous row as editable
  * @private
  */
-Table.prototype._setAdjacentRowEditable = function (columnIdx, origColumnIdx, isNext, event) {
-  var editableRowIdx = this._getEditableRowIdx();
-  return this._setTableEditable(false, false, columnIdx, isNext, event).then(
-    (updateEditable) => {
-      if (updateEditable === false) {
-        return this._handleEditEndRejected(origColumnIdx, editableRowIdx, !isNext);
-      }
-      return this._handleAdjacentEditEndSuccessful(columnIdx, editableRowIdx, isNext, event);
-    },
-    () => {
-      return this._handleEditEndRejected(origColumnIdx, editableRowIdx, !isNext);
-    }
-  );
-};
-
-/**
- * Helper method when attempting to set the adjacent row as editable
- * @private
- */
-Table.prototype._handleAdjacentEditEndSuccessful = function (columnIdx, rowIdx, isNext, event) {
+Table.prototype._setAdjacentRowEditable = function (focusedRowIdx, columnIdx, isNext, event) {
   var tableBodyRows = this._getTableBodyRows();
-  var newRowIdx = this._findAdjacentEditableRow(rowIdx, tableBodyRows, isNext);
+  var newRowIdx = this._findAdjacentEditableRow(focusedRowIdx, tableBodyRows, isNext);
   if (newRowIdx !== null) {
-    this._setActiveRow(newRowIdx, event, true, false, true);
-    return this._setTableEditable(true, false, columnIdx, isNext, event);
+    var rowKey = this._getRowKeyForRowIdx(newRowIdx);
+    if (rowKey != null) {
+      this._deferredEditInfo = { editRow: { rowKey }, columnIdx, isNext, event };
+    }
+  } else {
+    this._deferredEditInfo = { editRow: { rowKey: null, rowIndex: -1 }, event };
   }
-  this._getTable().focus();
-  return Promise.resolve();
+  this._queueTask(() => {
+    return this._setEditRow();
+  });
 };
 
 /**
@@ -21071,13 +21134,6 @@ Table.prototype._findAdjacentEditableRow = function (rowIdx, tableBodyRows, isNe
   return null;
 };
 
-/**
- * @private
- */
-Table.prototype._handleEditEndRejected = function (origColumnIdx, rowIdx, isNext) {
-  this._setCellInRowFocus(rowIdx, origColumnIdx, isNext);
-};
-
 /**
  * Fire editRow property change event
  * @private
@@ -21119,7 +21175,7 @@ Table.prototype._setTableEditable = function (
       var isLegacyDataSource = this._getData() instanceof oj$1.TableDataSourceAdapter;
       var currentRow = this._getCurrentRow();
       if (currentRow != null) {
-        this._isEditPending = true;
+        this._isApplyingEdit = true;
         const rowElementToBeEdited = this._getRowToBeEdited(currentRow);
         if (
           rowElementToBeEdited &&
@@ -21188,18 +21244,18 @@ Table.prototype._setTableEditable = function (
               }
             } else {
               // No updates so just exit
-              this._isEditPending = false;
+              this._isApplyingEdit = false;
               resolve();
               return;
             }
           } catch (err) {
-            this._isEditPending = false;
+            this._isApplyingEdit = false;
             resolve(false);
             return;
           }
           if (!updateEditMode) {
             this._syncActiveElement();
-            this._isEditPending = false;
+            this._isApplyingEdit = false;
             resolve(false);
             return;
           }
@@ -21253,11 +21309,11 @@ Table.prototype._setTableEditable = function (
                     (updatedItemObj) => {
                       _handleAsyncEdit(updatedItemObj).then(
                         () => {
-                          this._isEditPending = false;
+                          this._isApplyingEdit = false;
                           resolve();
                         },
                         () => {
-                          this._isEditPending = false;
+                          this._isApplyingEdit = false;
                           resolve();
                         }
                       );
@@ -21265,11 +21321,11 @@ Table.prototype._setTableEditable = function (
                     () => {
                       _handleAsyncEdit().then(
                         () => {
-                          this._isEditPending = false;
+                          this._isApplyingEdit = false;
                           resolve();
                         },
                         () => {
-                          this._isEditPending = false;
+                          this._isApplyingEdit = false;
                           resolve();
                         }
                       );
@@ -21278,11 +21334,11 @@ Table.prototype._setTableEditable = function (
                 } else {
                   _handleAsyncEdit().then(
                     () => {
-                      this._isEditPending = false;
+                      this._isApplyingEdit = false;
                       resolve();
                     },
                     () => {
-                      this._isEditPending = false;
+                      this._isApplyingEdit = false;
                       resolve();
                     }
                   );
@@ -21294,7 +21350,7 @@ Table.prototype._setTableEditable = function (
                   this._syncActiveElement();
                 }
                 this._isSkipScrollOnFocus = false;
-                this._isEditPending = false;
+                this._isApplyingEdit = false;
                 resolve(false);
               }
             );
@@ -21308,11 +21364,11 @@ Table.prototype._setTableEditable = function (
               (updatedItemObj) => {
                 _handleAsyncEdit(updatedItemObj).then(
                   () => {
-                    this._isEditPending = false;
+                    this._isApplyingEdit = false;
                     resolve();
                   },
                   () => {
-                    this._isEditPending = false;
+                    this._isApplyingEdit = false;
                     resolve();
                   }
                 );
@@ -21320,11 +21376,11 @@ Table.prototype._setTableEditable = function (
               () => {
                 _handleAsyncEdit().then(
                   () => {
-                    this._isEditPending = false;
+                    this._isApplyingEdit = false;
                     resolve();
                   },
                   () => {
-                    this._isEditPending = false;
+                    this._isApplyingEdit = false;
                     resolve();
                   }
                 );
@@ -21349,12 +21405,12 @@ Table.prototype._setTableEditable = function (
                 // set focus on the column in the row
                 this._setCellInRowFocus(editableRowIndex, columnIdx, forwardSearch);
                 this._refreshPrevEditableRow(prevEditableRowKey, null, cancelled).then(() => {
-                  this._isEditPending = false;
+                  this._isApplyingEdit = false;
                   resolve();
                 });
               },
               () => {
-                this._isEditPending = false;
+                this._isApplyingEdit = false;
                 resolve();
               }
             );
@@ -21366,11 +21422,11 @@ Table.prototype._setTableEditable = function (
           this._fireEditRowChangeEvent(newEditRowValue, event);
           this._refreshPrevEditableRow(prevEditableRowKey, null, cancelled).then(
             () => {
-              this._isEditPending = false;
+              this._isApplyingEdit = false;
               resolve();
             },
             () => {
-              this._isEditPending = false;
+              this._isApplyingEdit = false;
               resolve();
             }
           );
@@ -21751,21 +21807,15 @@ Table.prototype._handleKeydownTab = function (event) {
     var rowElementTabIndex = $(tabbableElementsInRow).index(currentFocusElement);
 
     var maxIndex = Math.max(this._getColumnDefs().length - 1, 0);
-    if (
-      rowElementTabIndex === tabbableElementsInRowCount - 1 &&
-      !event[Table._KEYBOARD_CODES._MODIFIER_SHIFT]
-    ) {
-      this._queueTask(() => {
-        // last tabbable element in row so go to the next row
-        return this._setAdjacentRowEditable(-1, maxIndex, true, event);
-      });
+    var isNext = !event[Table._KEYBOARD_CODES._MODIFIER_SHIFT];
+    if (rowElementTabIndex === tabbableElementsInRowCount - 1 && isNext) {
+      // last tabbable element in row so go to the next row
+      this._setAdjacentRowEditable(focusedRowIdx, -1, isNext, event);
       event.preventDefault();
       event.stopPropagation();
-    } else if (rowElementTabIndex === 0 && event[Table._KEYBOARD_CODES._MODIFIER_SHIFT]) {
-      this._queueTask(() => {
-        // first tabbable element in row and Shift+Tab so go to the previous row
-        return this._setAdjacentRowEditable(maxIndex, 0, false, event);
-      });
+    } else if (rowElementTabIndex === 0 && !isNext) {
+      // first tabbable element in row so go to the previous row
+      this._setAdjacentRowEditable(focusedRowIdx, maxIndex, isNext, event);
       event.preventDefault();
       event.stopPropagation();
     }
@@ -21888,16 +21938,18 @@ Table.prototype._handleKeydownEnter = function (event) {
     var currentRow = this._getCurrentRow();
     currentRow = currentRow || {};
     var currentRowIdx = currentRow.rowIndex != null ? currentRow.rowIndex : -1;
-    if (currentRowIdx >= 0) {
+    if (currentRowIdx >= 0 && currentRow.rowKey != null) {
       if (this._isTableEditMode()) {
-        this._queueTask(() => {
-          if (!this._hasEditableRow()) {
-            return this._setTableEditable(true, false, -1, true, event);
-          }
+        if (!this._hasEditableRow()) {
+          this._deferredEditInfo = { editRow: { rowKey: currentRow.rowKey }, isNext: true, event };
+          this._queueTask(() => {
+            return this._setEditRow();
+          });
+        } else {
           var columnIdx = this._getElementColumnIdx(event.target);
           var isNext = !event[Table._KEYBOARD_CODES._MODIFIER_SHIFT];
-          return this._setAdjacentRowEditable(columnIdx, columnIdx, isNext, event);
-        });
+          this._setAdjacentRowEditable(currentRowIdx, columnIdx, isNext, event);
+        }
       } else {
         this._fireActionEvent(currentRowIdx, event, false);
         this._setTableActionableMode(true);
@@ -21981,15 +22033,16 @@ Table.prototype._handleKeydownF2 = function (event) {
 Table.prototype._handleKeydownEsc = function (event) {
   // pressing Esc always returns focus back to the table.
   if (this._hasEditableRow()) {
-    event.preventDefault();
-    event.stopPropagation();
+    this._deferredEditInfo = { editRow: { rowKey: null, rowIndex: -1 }, isCancel: true, event };
     this._queueTask(() => {
-      return this._setTableEditable(false, true, 0, true, event);
+      return this._setEditRow();
     });
-  } else if (this._isTableActionableMode()) {
     event.preventDefault();
     event.stopPropagation();
+  } else if (this._isTableActionableMode()) {
     this._setTableActionableMode(false);
+    event.preventDefault();
+    event.stopPropagation();
   }
   this._getLayoutManager().handleKeyDownEsc();
 };
@@ -22554,28 +22607,26 @@ Table.prototype._updateSelectionStateFromEventDetailRemove = function (
   addEventDetail
 ) {
   var selected = this.option('selected');
-  var rowKeySet = selected.row;
-  if (rowKeySet) {
-    eventDetail[Table._CONST_KEYS].forEach(function (key) {
-      if (addEventDetail == null || !addEventDetail[Table._CONST_KEYS].has(key)) {
-        // remove rowKey reference from the existing selection state
-        if (!rowKeySet.isAddAll()) {
-          rowKeySet = rowKeySet.delete([key]);
-        } else if (!rowKeySet.has(key)) {
-          rowKeySet = rowKeySet.add([key]);
-        }
-      }
-    });
-    // only update selection if this led to a new selection state
-    if (selected.row !== rowKeySet) {
-      selected = { row: rowKeySet, column: selected.column };
-      // ensure selectionRequired is satisfied
-      if (!this._isSelectionRequiredSatisfied(selected)) {
-        this._selectFirstRowOrColumn();
-      } else {
-        this._setSelected(selected);
+  var rowKeySet = this._getRowKeySetFromSelected(selected);
+  eventDetail[Table._CONST_KEYS].forEach(function (key) {
+    if (addEventDetail == null || !addEventDetail[Table._CONST_KEYS].has(key)) {
+      // remove rowKey reference from the existing selection state
+      if (!rowKeySet.isAddAll()) {
+        rowKeySet = rowKeySet.delete([key]);
+      } else if (!rowKeySet.has(key)) {
+        rowKeySet = rowKeySet.add([key]);
       }
     }
+  });
+  // only update selection if this led to a new selection state
+  if (selected.row !== rowKeySet) {
+    selected = { row: rowKeySet, column: this._getColumnKeySetFromSelected(selected) };
+    // ensure selectionRequired is satisfied
+    if (!this._isSelectionRequiredSatisfied(selected)) {
+      this._selectFirstRowOrColumn();
+    } else {
+      this._setSelected(selected);
+    }
   }
 };
 
@@ -22624,7 +22675,7 @@ Table.prototype._updateSelectionStateFromEventDetailChange = function (eventDeta
  */
 Table.prototype._updateSelectionStylingFromColumnReorder = function () {
   var selected = this.option('selected');
-  var columnKeySet = selected.column;
+  var columnKeySet = this._getColumnKeySetFromSelected(selected);
 
   var headers = this._getTableHeaderColumns();
   headers.forEach(function (header, index) {
@@ -22645,8 +22696,8 @@ Table.prototype._validateInitialSelectionState = function (isOptionUpdate) {
   var validateSelectedResult;
   var selection = this.option('selection');
   var selected = this.option('selected');
-  var rowKeySet = selected.row;
-  var columnKeySet = selected.column;
+  var rowKeySet = this._getRowKeySetFromSelected(selected);
+  var columnKeySet = this._getColumnKeySetFromSelected(selected);
   this._validatedSelectedRowKeyData = null;
 
   // generate new selected value from existing selection value if required
@@ -22710,8 +22761,8 @@ Table.prototype._hasSelected = function (selected) {
     // eslint-disable-next-line no-param-reassign
     selected = this.option('selected');
   }
-  var rowKeySet = selected.row;
-  var columnKeySet = selected.column;
+  var rowKeySet = this._getRowKeySetFromSelected(selected);
+  var columnKeySet = this._getColumnKeySetFromSelected(selected);
   return (
     rowKeySet.isAddAll() ||
     rowKeySet.values().size > 0 ||
@@ -22801,7 +22852,7 @@ Table.prototype._selectFirstRowOrColumn = function () {
  * @private
  */
 Table.prototype._validateSelected = function (selected) {
-  var columnKeySet = selected.column;
+  var columnKeySet = this._getColumnKeySetFromSelected(selected);
   var validatedColumnKeySet = columnKeySet;
   if (!columnKeySet.isAddAll()) {
     var columnKeys = this._getColumnKeys();
@@ -22817,7 +22868,7 @@ Table.prototype._validateSelected = function (selected) {
     }
   }
 
-  var rowKeySet = selected.row;
+  var rowKeySet = this._getRowKeySetFromSelected(selected);
   var validatedRowKeySet = rowKeySet;
   if (!rowKeySet.isAddAll()) {
     var localRowKeys = this._getLocalRowKeys();
@@ -23161,6 +23212,8 @@ Table.prototype._setSelected = function (selected, skipSelectionUpdate) {
     if (this._selectionSet) {
       // when selection is set, we need to check if selected key sets are equivalent
       if (
+        currentSelected.row == null ||
+        currentSelected.column == null ||
         !areKeySetsEqual(currentSelected.row, selected.row) ||
         !areKeySetsEqual(currentSelected.column, selected.column)
       ) {
@@ -23311,12 +23364,14 @@ Table.prototype._getSelectedEquivalent = function (selection) {
  * @private
  */
 Table.prototype._getSelectionEquivalent = function (selected) {
-  var selection = this._getRowSelectionFromKeySet(selected.row);
+  var rowKeySet = this._getRowKeySetFromSelected(selected);
+  var selection = this._getRowSelectionFromKeySet(rowKeySet);
   // if there is a row selection, return that selection as it takes precedence over column selection
   if (selection.length > 0 || selection.inverted) {
     return selection;
   }
-  selection = this._getColumnSelectionFromKeySet(selected.column);
+  var columnKeySet = this._getColumnKeySetFromSelected(selected);
+  selection = this._getColumnSelectionFromKeySet(columnKeySet);
   // otherwise, if there is a column selection, return that selection
   if (selection.length > 0 || selection.inverted) {
     return selection;
@@ -23371,8 +23426,8 @@ Table.prototype._getColumnSelectionFromKeySet = function (keySet) {
  * @private
  */
 Table.prototype._applySelected = function (selected) {
-  var rowKeySet = selected.row;
-  var columnKeySet = selected.column;
+  var rowKeySet = this._getRowKeySetFromSelected(selected);
+  var columnKeySet = this._getColumnKeySetFromSelected(selected);
 
   // remove selection state from previously selected rows that are no longer selected
   var prevSelectedRows = this._getSelectedRowIdxs();
@@ -23553,8 +23608,8 @@ Table.prototype._setLastHeaderColumnSelection = function (columnIdx, selected) {
 Table.prototype._handleSelectionGesture = function (index, isRow, isMultiSelectGesture) {
   var isSelect;
   var selected = this.option('selected');
-  var rowKeySet = selected.row;
-  var columnKeySet = selected.column;
+  var rowKeySet = this._getRowKeySetFromSelected(selected);
+  var columnKeySet = this._getColumnKeySetFromSelected(selected);
   if (isRow) {
     columnKeySet = columnKeySet.clear();
     const row = this._getTableBodyRow(index);
@@ -23648,8 +23703,8 @@ Table.prototype._handleSelectionGesture = function (index, isRow, isMultiSelectG
  */
 Table.prototype._handleSelectAllGesture = function () {
   var selected = this.option('selected');
-  var rowKeySet = selected.row;
-  var columnKeySet = selected.column;
+  var rowKeySet = this._getRowKeySetFromSelected(selected);
+  var columnKeySet = this._getColumnKeySetFromSelected(selected);
   columnKeySet = columnKeySet.clear();
   if (rowKeySet.isAddAll()) {
     rowKeySet = new KeySetImpl();
@@ -23706,8 +23761,8 @@ Table.prototype._handleMouseEnterSelection = function (element, isTouchAffordanc
  */
 Table.prototype._selectRange = function (firstSelectedIndex, lastSelectedIndex, isRow) {
   var selected = this.option('selected');
-  var rowKeySet = selected.row;
-  var columnKeySet = selected.column;
+  var rowKeySet = this._getRowKeySetFromSelected(selected);
+  var columnKeySet = this._getColumnKeySetFromSelected(selected);
 
   var i;
   if (isRow) {
@@ -23839,10 +23894,11 @@ Table.prototype._getSelectedFooterColumnIdxs = function () {
 Table.prototype._clearSelectedRows = function () {
   this._selectionAnchorIdx = null;
   this._lastSelectedRowIdx = null;
-  var rowKeySet = this.option('selected.row');
+  var selected = this.options.selected;
+  var rowKeySet = this._getRowKeySetFromSelected(selected);
   var newRowKeySet = rowKeySet.clear();
   if (newRowKeySet !== rowKeySet) {
-    var selected = { row: newRowKeySet, column: this.option('selected.column') };
+    selected = { row: newRowKeySet, column: this._getColumnKeySetFromSelected(selected) };
     this._setSelected(selected);
   }
 };
@@ -23870,7 +23926,7 @@ Table.prototype._selectedKeysChangedListener = function (event) {
     if (event.detail.value.isAddAll()) {
       this._setSelected({ row: event.detail.value, column: new KeySetImpl() }, false, true);
     } else {
-      let rowSelectedKeySet = this.option('selected').row;
+      let rowSelectedKeySet = this._getRowKeySetFromSelected(this.options.selected);
       // header selector
       if (event.target.rowKey == null) {
         this._setSelected({ row: new KeySetImpl(), column: new KeySetImpl() }, false, true);
@@ -23937,6 +23993,20 @@ Table.prototype._updateSelectors = function (selected) {
   }
 };
 
+/**
+ * Returns a valid row key set from a 'selected' object
+ */
+Table.prototype._getRowKeySetFromSelected = function (selected) {
+  return selected.row || new KeySetImpl();
+};
+
+/**
+ * Returns a valid column key set from a 'selected' object
+ */
+Table.prototype._getColumnKeySetFromSelected = function (selected) {
+  return selected.column || new KeySetImpl();
+};
+
 /**
  * @ojcomponent oj.ojTable
  * @augments oj.baseComponent
@@ -26835,15 +26905,11 @@ Table.prototype._setOption = function (key, value, flags) {
       this._syncScrollPosition(value);
     });
   } else if (key === 'editRow') {
+    this._deferredEditInfo = { editRow: value, isNext: true };
     this._queueTask(() => {
-      if (value != null && (value.rowKey != null || value.rowIndex > -1)) {
-        // clear the pending focusout editkey value if a row is becoming editable
-        this._focusoutEditKey = null;
-      }
       // setEditRow will update with all props within value
       return this._setEditRow();
     });
-    this._deferredEditInfo = { editRow: value };
   } else if (key === 'scrollPolicyOptions' && flags != null) {
     this._superApply(arguments);
     if (this._isStickyLayoutEnabled()) {