@oracle/oraclejet 15.1.2 → 15.1.3

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;
     }
@@ -14476,17 +14536,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;
   };
 

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.3',
   /**
    * @global
    * @member {string} revision JET source code revision number
    */
-  revision: '2023-11-02_05-11-27',
+  revision: '2023-12-06_06-28-08',
 
   // 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/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();

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

@@ -13900,13 +13900,13 @@ DvtDataGrid.prototype.handleHeaderMouseDown = function (event) {
   if (header == null) {
     return;
   }
+  this.m_shouldFocus = false;
 
-  this._exitActionableMode();
   var target = /** @type {Element} */ (event.target);
+  const activeElement = this._getActiveElement();
 
   if (this._isEditOrEnter()) {
-    var cell = this._getActiveElement();
-    if (this._leaveEditing(event, cell, false) === false) {
+    if (this._leaveEditing(event, activeElement, false) === false) {
       return;
     }
   }
@@ -14459,25 +14459,24 @@ DvtDataGrid.prototype.handleDatabodyMouseDown = function (event) {
   // removing hidden column indicator in databody after hiding a column
   // on mousedown elsewhere in databody
   this.deleteDatabodyHiddenVisualIndicators();
+
   var target = /** @type {Element} */ (event.target);
   var cell = this.findCell(target);
   if (cell == null) {
     this.m_scrollbarFocus = true;
     return;
   }
+  this.m_shouldFocus = false;
 
+  const activeElement = this._getActiveElement();
   if (this._isEditOrEnter()) {
-    var activeCell = this._getActiveElement();
-    if (cell !== activeCell) {
-      if (this._leaveEditing(event, activeCell, false) === false) {
+    if (cell !== activeElement) {
+      if (this._leaveEditing(event, activeElement, false) === false) {
         return;
       }
     } else {
       return;
     }
-  } else {
-    // reset actionable mode whenever user clicks in the databody
-    this._exitActionableMode();
   }
 
   var ctrlKey = this.m_utils.ctrlEquivalent(event);
@@ -14940,11 +14939,10 @@ DvtDataGrid.prototype.handleTouchEnd = function (event) {
       this.handleTouchCancel(event);
       return;
     }
-  } else {
-    // reset actionable mode whenever user clicks in the databody
-    this._exitActionableMode();
   }
 
+  this.m_shouldFocus = false;
+
   if (
     this.m_lastTapTime != null &&
     this.m_startTime - this.m_lastTapTime < 250 &&
@@ -19135,6 +19133,7 @@ DvtDataGrid.prototype._updateActive = function (activeObject, shouldFocus, shoul
  * @param {boolean|null=} clearSelection true if we should clear the selection on active change
  * @param {boolean|null=} silent true if we should not fire events
  * @param {boolean|null=} shouldNotScroll true if we should not scroll before setting active (in case it came froma  scroll event, prevent loop)
+ * @param {boolean|null=} shouldNotFocusIn true coming from case where somthing is already focused and would just like to set active
  * @returns {boolean} true if active was changed, false if not
  */
 DvtDataGrid.prototype._setActive = function (
@@ -19143,7 +19142,8 @@ DvtDataGrid.prototype._setActive = function (
   event,
   clearSelection,
   silent,
-  shouldNotScroll
+  shouldNotScroll,
+  shouldNotFocusIn
 ) {
   if (cellInfo != null && !shouldNotScroll) {
     this._scrollToActive(cellInfo);
@@ -19161,6 +19161,12 @@ DvtDataGrid.prototype._setActive = function (
         this.m_prevActive = this.m_active;
         this.m_active = active;
 
+        // Disable previous active element's focusable content
+        const prevActiveElement = this._getElementFromActiveObject(this.m_prevActive);
+        if (prevActiveElement) {
+          disableAllFocusableElements(prevActiveElement);
+        }
+
         if (event && event.type === 'mousedown') {
           this.m_trueIndex = null;
         }
@@ -19195,7 +19201,7 @@ DvtDataGrid.prototype._setActive = function (
       }
     } else {
       // still wanted to make sure the cell was highlighted even if focus hasn't actually changed
-      this._highlightActive();
+      this._highlightActive(null, shouldNotFocusIn);
     }
   } else if (!this.m_scrollIndexAfterFetch && !this.m_scrollHeaderAfterFetch) {
     if (silent || this._fireBeforeCurrentCellEvent(active, this.m_active, event)) {
@@ -19332,7 +19338,9 @@ DvtDataGrid.prototype._compareActive = function (active1, active2) {
   } else if ((active1 == null && active2 != null) || (active1 != null && active2 == null)) {
     return true;
   } else if (active1.type === active2.type) {
-    if (active1.type === 'header') {
+    if (active1.type === 'empty') {
+      return true;
+    } else if (active1.type === 'header') {
       if (
         active1.index !== active2.index ||
         active1.key !== active2.key ||
@@ -19962,10 +19970,11 @@ DvtDataGrid.prototype.find = function (elem, key, className) {
 /**
  * Highlight the current active element
  * @param {Array=} classNames string of classNames to add to active element
+ * @param {boolean|null=} shouldNotFocusIn true coming from case where somthing is already focused and would just like to set active
  * @private
  */
-DvtDataGrid.prototype._highlightActive = function (classNames) {
-  this._highlightActiveObject(this.m_active, this.m_prevActive, classNames);
+DvtDataGrid.prototype._highlightActive = function (classNames, shouldNotFocusIn) {
+  this._highlightActiveObject(this.m_active, this.m_prevActive, classNames, null, shouldNotFocusIn);
 };
 
 /**
@@ -19983,13 +19992,15 @@ DvtDataGrid.prototype._unhighlightActive = function (classNames) {
  * @param {Object} prevActiveObject last active to base aria properties on
  * @param {Array=} classNames string of classNames to add to active element
  * @param {boolean|null=} shouldNotScroll boolean if element should be scrolled into view
+ * @param {boolean|null=} shouldNotFocusIn true coming from case where somthing is already focused and would just like to set active
  * @private
  */
 DvtDataGrid.prototype._highlightActiveObject = function (
   activeObject,
   prevActiveObject,
   classNames,
-  shouldNotScroll
+  shouldNotScroll,
+  shouldNotFocusIn
 ) {
   if (classNames == null && this.m_utils.shouldOffsetOutline()) {
     // eslint-disable-next-line no-param-reassign
@@ -19999,7 +20010,9 @@ DvtDataGrid.prototype._highlightActiveObject = function (
     var element = this._getElementFromActiveObject(activeObject);
     // possible in the virtual case
     if (element != null) {
-      this.m_focusInHandler(element);
+      if (!shouldNotFocusIn) {
+        this.m_focusInHandler(element);
+      }
       if (classNames != null) {
         this._highlightElement(element, classNames);
       }
@@ -20992,12 +21005,18 @@ DvtDataGrid.prototype.readCurrentContent = function () {
  * @param {Element|undefined|null} element to set actionable
  * @returns {boolean} false
  */
-DvtDataGrid.prototype._enterActionableMode = function (element, event) {
-  // focus on first focusable item in the cell
-  if (this._setFocusToFirstFocusableElement(element, event)) {
-    this.m_focusOutHandler(element);
-    this.setActionableMode(true);
+DvtDataGrid.prototype._enterActionableMode = function (element, event, shouldApplyFocus) {
+  if (!this.isActionableMode()) {
+    this._enteringActionableMode = true;
+    if (
+      !shouldApplyFocus ||
+      (shouldApplyFocus && this._setFocusToFirstFocusableElement(element, event))
+    ) {
+      this.m_focusOutHandler(element);
+      this.setActionableMode(true);
+    }
   }
+  this._enteringActionableMode = false;
   return false;
 };
 
@@ -24684,6 +24703,7 @@ DvtDataGrid.prototype.handleRootFocus = function (event, isPopupFocusin) {
   this.m_utils.addCSSClassName(this.m_root, this.getMappedStyle('focus'));
   this._clearFocusoutTimeout();
   this._clearFocusoutBusyState();
+  const target = event.target;
   // if nothing is active, and came from the outside of the datagrid, activate first cell
   if (!isPopupFocusin) {
     this._clearOpenPopupListeners();
@@ -24694,6 +24714,7 @@ DvtDataGrid.prototype.handleRootFocus = function (event, isPopupFocusin) {
         this.m_scrollbarFocus &&
         this.m_root.tabIndex === 0)
     ) {
+      this._exitActionableMode();
       this.m_externalFocus = true;
 
       if (this._isCellEditable()) {
@@ -24728,11 +24749,42 @@ DvtDataGrid.prototype.handleRootFocus = function (event, isPopupFocusin) {
       } else if (this.m_active != null) {
         this._highlightActive();
       }
+    } else if (
+      !this.m_utils.containsCSSClassName(target, this.getMappedStyle('cell')) &&
+      !this.m_utils.containsCSSClassName(target, this.getMappedStyle('headercell')) &&
+      !this.m_utils.containsCSSClassName(target, this.getMappedStyle('headerlabel')) &&
+      !this.m_utils.containsCSSClassName(target, this.getMappedStyle('endheadercell')) &&
+      !this.m_utils.containsCSSClassName(target, this.getMappedStyle('noDataContainer')) &&
+      !this._isEditOrEnter()
+    ) {
+      if (!this._enteringActionableMode) {
+        let element = this._getOwnedContentFromTarget(target);
+        if (element) {
+          this.m_shouldFocus = false;
+          const active = this._createActiveObject(element);
+          this._setActive(element, active, event, null, null, null, true);
+          enableAllFocusableElements(element);
+          this._enterActionableMode(element, null, false);
+        }
+      }
+    } else {
+      this._exitActionableMode();
     }
     this.m_root.tabIndex = -1;
   }
 };
 
+DvtDataGrid.prototype._getOwnedContentFromTarget = function (target) {
+  let element = this.findCellOrHeader(target);
+  if (element === null) {
+    element = this.findLabel(target);
+  }
+  if (element === null) {
+    element = this.find(target, 'noDataContainer');
+  }
+  return element;
+};
+
 DvtDataGrid.prototype._handlePopupFocusout = function (event) {
   this.handleRootBlur(event, true);
 };
@@ -24782,6 +24834,7 @@ DvtDataGrid.prototype.handleRootBlur = function (event, isPopupFocusout) {
           if (this._isEditOrEnter() && !this.m_animating) {
             this._leaveEditing(event, active, false, false);
           }
+          this._exitActionableMode();
         }
       }
       this._clearFocusoutBusyState();
@@ -25518,7 +25571,7 @@ DvtDataGrid.prototype.setActionableMode = function (flag) {
  * @returns {boolean} false
  */
 DvtDataGrid.prototype._handleActionable = function (event, element) {
-  this._enterActionableMode(element, event);
+  this._enterActionableMode(element, event, true);
   return false;
 };
 
@@ -25716,7 +25769,7 @@ DvtDataGrid.prototype._handleEdit = function (event, element) {
     });
   } else {
     rerender = false;
-    this._enterActionableMode(element);
+    this._enterActionableMode(element, null, true);
   }
   return rerender;
 };