@oracle/oraclejet 18.0.6 → 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;
@@ -10344,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];
@@ -11605,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;
   }
 
@@ -11694,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);
@@ -12009,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;
   }
 
@@ -12079,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);
@@ -15453,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
@@ -17515,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
@@ -17541,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),
@@ -17745,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;
     }
@@ -18191,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;
@@ -18582,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)
       );
@@ -19467,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) {
@@ -19509,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
@@ -20874,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();
@@ -20896,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();
@@ -20912,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();
@@ -20935,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) {
@@ -20951,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;
@@ -20968,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();
@@ -20978,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);
 };
@@ -21021,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();
+  });
 };
 
 /**
@@ -21073,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
@@ -21121,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 &&
@@ -21190,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;
           }
@@ -21255,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();
                         }
                       );
@@ -21267,11 +21321,11 @@ Table.prototype._setTableEditable = function (
                     () => {
                       _handleAsyncEdit().then(
                         () => {
-                          this._isEditPending = false;
+                          this._isApplyingEdit = false;
                           resolve();
                         },
                         () => {
-                          this._isEditPending = false;
+                          this._isApplyingEdit = false;
                           resolve();
                         }
                       );
@@ -21280,11 +21334,11 @@ Table.prototype._setTableEditable = function (
                 } else {
                   _handleAsyncEdit().then(
                     () => {
-                      this._isEditPending = false;
+                      this._isApplyingEdit = false;
                       resolve();
                     },
                     () => {
-                      this._isEditPending = false;
+                      this._isApplyingEdit = false;
                       resolve();
                     }
                   );
@@ -21296,7 +21350,7 @@ Table.prototype._setTableEditable = function (
                   this._syncActiveElement();
                 }
                 this._isSkipScrollOnFocus = false;
-                this._isEditPending = false;
+                this._isApplyingEdit = false;
                 resolve(false);
               }
             );
@@ -21310,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();
                   }
                 );
@@ -21322,11 +21376,11 @@ Table.prototype._setTableEditable = function (
               () => {
                 _handleAsyncEdit().then(
                   () => {
-                    this._isEditPending = false;
+                    this._isApplyingEdit = false;
                     resolve();
                   },
                   () => {
-                    this._isEditPending = false;
+                    this._isApplyingEdit = false;
                     resolve();
                   }
                 );
@@ -21351,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();
               }
             );
@@ -21368,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();
             }
           );
@@ -21753,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();
     }
@@ -21890,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);
@@ -21983,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();
 };
@@ -26854,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()) {