@oracle/oraclejet 14.1.0 → 14.1.1

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

@@ -465,64 +465,50 @@ class FlattenedTreeDataProviderView {
     }
     _calculateItemIndex(parentKey, addEvent, index) {
         var _a, _b;
-        let newIndex;
         if (this._currentSortCriteria) {
             const children = this._getChildrenFromCacheByParentKey(parentKey);
             const sortComparator = SortUtils.getNaturalSortCriteriaComparator(this._currentSortCriteria);
-            const lastChildItem = children[children.length - 1];
-            if (children.length > 0) {
-                if (sortComparator(lastChildItem.data, addEvent.data[index]) >= 0) {
-                    for (let i = 0; i < children.length; i++) {
-                        if (sortComparator(addEvent.data[index], children[i].data) < 0) {
-                            newIndex = this._getItemIndexByKey(children[i].metadata.key) - 1;
-                            break;
-                        }
-                    }
+            for (let i = 0; i < children.length; i++) {
+                if (sortComparator(addEvent.data[index], children[i].data) < 0) {
+                    return this._getItemIndexByKey(children[i].metadata.key);
                 }
-                else {
-                    newIndex =
-                        this._getItemIndexByKey(lastChildItem.metadata.key) +
-                            this._getLocalDescendentCount(lastChildItem.metadata.key) +
-                            1;
-                }
-            }
-            else {
-                newIndex = this._getItemIndexByKey(parentKey);
             }
+            return this._getOOBInsertIndex(parentKey);
         }
         else {
             if (((_a = addEvent === null || addEvent === void 0 ? void 0 : addEvent.addBeforeKeys) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-                if (parentKey === null) {
-                    const beforeKey = addEvent.addBeforeKeys[index];
-                    if (beforeKey !== null) {
-                        let beforeIndex = this._getItemIndexByKey(addEvent.addBeforeKeys[index]);
-                        newIndex = beforeIndex - 1;
-                    }
-                    else {
-                        newIndex = this._cache.length;
-                    }
-                }
-                else {
-                    const parentIndex = this._getItemIndexByKey(parentKey);
-                    newIndex = parentIndex + this._getLocalDescendentCount(parentKey);
-                    if (newIndex === this._cache.length - 1) {
-                        newIndex += 1;
-                    }
+                const beforeKey = addEvent.addBeforeKeys[index];
+                const beforeKeyItemIndex = beforeKey === null ? -1 : this._getItemIndexByKey(beforeKey);
+                if (beforeKeyItemIndex === -1) {
+                    return this._getOOBInsertIndex(parentKey);
                 }
+                return beforeKeyItemIndex;
             }
             else if (((_b = addEvent === null || addEvent === void 0 ? void 0 : addEvent.indexes) === null || _b === void 0 ? void 0 : _b.length) > 0) {
-                const parentIndex = this._getItemIndexByKey(parentKey);
-                newIndex =
-                    parentIndex === -1
-                        ? addEvent.indexes[index] + 1
-                        : parentIndex + this._getLocalDescendentCount(parentKey) + 1;
+                const indexFromParent = addEvent.indexes[index];
+                const children = this._getChildrenFromCacheByParentKey(parentKey);
+                if (indexFromParent === null || indexFromParent > children.length) {
+                    return this._getOOBInsertIndex(parentKey);
+                }
+                if (indexFromParent === 0) {
+                    return this._getItemIndexByKey(parentKey) + 1;
+                }
+                return (this._getItemIndexByKey(children[indexFromParent - 1].metadata.key) +
+                    this._getLocalDescendentCount(children[indexFromParent - 1].metadata.key) +
+                    1);
             }
             else {
-                newIndex =
-                    this._getItemIndexByKey(this._getLastItemByParentKey(parentKey).metadata.key) + 1;
+                return this._getOOBInsertIndex(parentKey);
             }
         }
-        return newIndex;
+    }
+    _getOOBInsertIndex(parentKey) {
+        if (this._mapParentKeyToInfo.get(parentKey).done) {
+            return this._getItemIndexByKey(parentKey) + this._getLocalDescendentCount(parentKey) + 1;
+        }
+        else {
+            return null;
+        }
     }
     _incrementIndexFromParent(newIndex, depth) {
         const lastIndex = this._getLastIndex();
@@ -572,17 +558,24 @@ class FlattenedTreeDataProviderView {
                     (!this._currentFilterCriteria ||
                         (this._currentFilterCriteria &&
                             this._currentFilterCriteria.filter(addEvent.data[index])))) {
-                    let newIndex = this._calculateItemIndex(parentKey, addEvent, index);
-                    const item = this._updateItemMetadata(new this.Item(this, addEvent.metadata[index], addEvent.data[index]), parentKey, addEvent.indexes[index]);
-                    this._spliceItemToCache(item, newIndex);
-                    this._incrementIndexFromParent(newIndex + 1, item.metadata.treeDepth);
-                    addDataArray.push(item.data);
-                    addMetadataArray.push(item.metadata);
-                    addIndexArray.push(newIndex + 1);
-                    addParentKeys.push(parentKey);
-                    addKeySet.add(addEvent.metadata[index].key);
-                    addBeforeKeys.push(this._getKeyByIndex(newIndex + 2));
-                    this._incrementIteratorOffset(newIndex + 1);
+                    const newIndex = this._calculateItemIndex(parentKey, addEvent, index);
+                    if (newIndex != null) {
+                        const lastIndex = this._getLastIndex();
+                        if (newIndex > lastIndex) {
+                            this._mapParentKeyToInfo.set(parentKey, { done: false });
+                        }
+                        const indexFromParent = (addEvent === null || addEvent === void 0 ? void 0 : addEvent.indexes) ? addEvent.indexes[index] : null;
+                        const item = this._updateItemMetadata(new this.Item(this, addEvent.metadata[index], addEvent.data[index]), parentKey, indexFromParent);
+                        this._cache.splice(newIndex, 0, item);
+                        this._incrementIndexFromParent(newIndex, item.metadata.treeDepth);
+                        addDataArray.push(item.data);
+                        addMetadataArray.push(item.metadata);
+                        addIndexArray.push(newIndex);
+                        addParentKeys.push(parentKey);
+                        addKeySet.add(addEvent.metadata[index].key);
+                        addBeforeKeys.push(this._getKeyByIndex(newIndex + 1));
+                        this._incrementIteratorOffset(newIndex);
+                    }
                 }
                 else {
                     this._mapParentKeyToInfo.delete(parentKey);
@@ -658,6 +651,7 @@ class FlattenedTreeDataProviderView {
                 const item = this._cache[i];
                 if (keys.has(item.metadata.key)) {
                     this._mapParentKeyToInfo.delete(item.metadata.key);
+                    this._markParentsAsNotDone(item);
                     const refreshEvent = new DataProviderRefreshEvent(new this.DataProviderRefreshEventDetail(item.metadata.key));
                     const removedItems = this._cache.splice(i + 1, this._cache.length);
                     removedItems.forEach((item) => {
@@ -674,6 +668,16 @@ class FlattenedTreeDataProviderView {
             this.dispatchEvent(new DataProviderRefreshEvent());
         }
     }
+    _markParentsAsNotDone(item) {
+        const parentKey = item.metadata.parentKey;
+        if (this._mapParentKeyToInfo.has(parentKey)) {
+            this._mapParentKeyToInfo.set(parentKey, { done: false });
+        }
+        if (parentKey === null) {
+            return;
+        }
+        this._markParentsAsNotDone(this._getItemByKey(parentKey));
+    }
     _getExpandedObservableValue(expanded, completionPromise) {
         return {
             value: expanded,
@@ -1089,9 +1093,6 @@ class FlattenedTreeDataProviderView {
                 this._getLocalDescendentCount(lastEntry.metadata.key);
         this._cache.splice(index + 1, 0, item);
     }
-    _spliceItemToCache(item, index) {
-        this._cache.splice(index + 1, 0, item);
-    }
     _removeKeysNotInCache(keysToExpand) {
         const keysInCache = new Set();
         keysToExpand.forEach((key) => {
@@ -1168,6 +1169,9 @@ class FlattenedTreeDataProviderView {
         return this._cache.length - 1;
     }
     _getLocalDescendentCount(key) {
+        if (key === null) {
+            return this._cache.length;
+        }
         const item = this._getItemByKey(key);
         let count = 0;
         if (item != null) {

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

@@ -2178,6 +2178,7 @@ Table.prototype._cleanComponent = function (isDestroy) {
   this._isEditPending = null;
   this._active = null;
   this._isTableTab = null;
+  this._isAddRowRendered = false;
   this._renderedTableHeaderColumns = false;
 
   // clear any pending timeouts
@@ -2477,6 +2478,7 @@ Table.prototype._refresh = function () {
   if (contextMenu != null && contextMenu !== this._getContextMenuElement()) {
     this._createContextMenuContainer();
   }
+  this._isAddRowRendered = false;
   this._clearLayoutManager();
   this._clearCachedDom();
   this._clearCachedStyling();
@@ -2884,13 +2886,7 @@ Table.prototype._refreshTableBody = function (resultObject, startIndex, keepVisi
   this._hideNoDataMessage();
   const tableBodyDocFrag = document.createDocumentFragment();
 
-  if (
-    this._isAddNewRowEnabled() &&
-    (startIndex == null || startIndex === 0) &&
-    this._getPlaceHolderRow() == null
-  ) {
-    this._refreshAddNewRowPlaceholder(tableBodyDocFrag, true);
-  }
+  this._refreshAddNewRowPlaceholder(tableBodyDocFrag, true);
 
   // if no new rows, and no existing rows, show no data message
   if (rows.length === 0 && this._getTableBodyRows().length === 0) {
@@ -3221,125 +3217,129 @@ Table.prototype._refreshAddNewRowPlaceholder = function (docFrag, skipTopUpdate)
       this._hasAddRowTemplate = false;
       this._setTableActionableMode(false);
     }
+    this._isAddRowRendered = false;
     return Promise.resolve(false);
   }
 
-  const templateEngine = this._getTemplateEngine();
-  const addRowTemplate = this._getSlotTemplate('addRowTemplate');
-  const addRowCellTemplate = this._getSlotTemplate('addRowCellTemplate');
-  if (templateEngine !== null) {
-    let slotContext;
-    let submitAddRow = function (cancelAdd) {
-      this._handleAddRow(cancelAdd, null);
-    }.bind(this);
-    const componentElement = this._getRootElement();
-    const tableBody = this._getTableBody();
+  if (!this._isAddRowRendered) {
+    const templateEngine = this._getTemplateEngine();
+    const addRowTemplate = this._getSlotTemplate('addRowTemplate');
+    const addRowCellTemplate = this._getSlotTemplate('addRowCellTemplate');
+    if (templateEngine !== null) {
+      let slotContext;
+      let submitAddRow = function (cancelAdd) {
+        this._handleAddRow(cancelAdd, null);
+      }.bind(this);
+      const componentElement = this._getRootElement();
+      const tableBody = this._getTableBody();
 
-    if (placeHolderRow != null) {
-      this._cleanTemplateNodes(placeHolderRow);
-      $(placeHolderRow).empty();
-    }
-    if (placeHolderRow == null) {
-      placeHolderRow = this._createTableBodyRow();
-    }
-    if (docFrag != null) {
-      docFrag.appendChild(placeHolderRow);
-    } else {
-      tableBody.insertBefore(placeHolderRow, tableBody.firstChild);
-    }
-
-    var addRowCell;
-    if (addRowTemplate != null && this._isDefaultAddRowTemplateSlotValid()) {
-      slotContext = this._getRowSlotTemplateContextObject({}, true);
-      slotContext.submitAddRow = submitAddRow;
-      const nodes = templateEngine.execute(
-        componentElement,
-        addRowTemplate,
-        slotContext,
-        this.options.as,
-        tableBody
-      );
-      for (let i = 0; i < nodes.length; i++) {
-        if (nodes[i].tagName === 'TR') {
-          placeHolderRow.parentNode.replaceChild(nodes[i], placeHolderRow);
-          break;
-        } else {
-          placeHolderRow.appendChild(nodes[i]); // @HTMLUpdateOK
-        }
+      if (placeHolderRow != null) {
+        this._cleanTemplateNodes(placeHolderRow);
+        $(placeHolderRow).empty();
       }
-      if (docFrag == null) {
-        placeHolderRow = this._getRawTableBodyRow(-1);
-      } else if (!docFrag.children) {
-        // use jquery children() because documentFragments do not have
-        // good browser support for .children
-        // eslint-disable-next-line no-param-reassign
-        placeHolderRow = $(docFrag).children()[0];
+      if (placeHolderRow == null) {
+        placeHolderRow = this._createTableBodyRow();
+      }
+      if (docFrag != null) {
+        docFrag.appendChild(placeHolderRow);
       } else {
-        // eslint-disable-next-line no-param-reassign
-        placeHolderRow = docFrag.children[0];
-      }
-      // make sure to honor any reordered columns when re-rendering the add row content from a row template
-      if (this._columnsDestMap != null) {
-        var renderedCells = this._getPlaceHolderRowCells(placeHolderRow);
-        for (let i = 0; i < this._columnsDestMap.length; i++) {
-          var moveAddRowCell = renderedCells[this._columnsDestMap[i]];
-          moveAddRowCell.parentNode.appendChild(moveAddRowCell); // @HTMLUpdateOK
-        }
+        tableBody.insertBefore(placeHolderRow, tableBody.firstChild);
       }
-    } else if (addRowCellTemplate !== null && this._isDefaultAddRowCellTemplateSlotValid()) {
-      var columns = this._getColumnDefs();
-      var columnsCount = columns.length;
-      for (var j = 0; j < columnsCount; j++) {
-        addRowCell = this._createTableBodyCell();
-        placeHolderRow.appendChild(addRowCell);
-        slotContext = this._getCellSlotTemplateContextObject({ columnIndex: j }, true);
+
+      var addRowCell;
+      if (addRowTemplate != null && this._isDefaultAddRowTemplateSlotValid()) {
+        slotContext = this._getRowSlotTemplateContextObject({}, true);
         slotContext.submitAddRow = submitAddRow;
-        var cellContent = templateEngine.execute(
+        const nodes = templateEngine.execute(
           componentElement,
-          addRowCellTemplate,
+          addRowTemplate,
           slotContext,
           this.options.as,
           tableBody
         );
-        if (!(cellContent instanceof Array)) {
-          cellContent = [cellContent];
+        for (let i = 0; i < nodes.length; i++) {
+          if (nodes[i].tagName === 'TR') {
+            placeHolderRow.parentNode.replaceChild(nodes[i], placeHolderRow);
+            break;
+          } else {
+            placeHolderRow.appendChild(nodes[i]); // @HTMLUpdateOK
+          }
+        }
+        if (docFrag == null) {
+          placeHolderRow = this._getRawTableBodyRow(-1);
+        } else if (!docFrag.children) {
+          // use jquery children() because documentFragments do not have
+          // good browser support for .children
+          // eslint-disable-next-line no-param-reassign
+          placeHolderRow = $(docFrag).children()[0];
+        } else {
+          // eslint-disable-next-line no-param-reassign
+          placeHolderRow = docFrag.children[0];
         }
-        for (let i = 0; i < cellContent.length; i++) {
-          addRowCell.appendChild(cellContent[i]);
+        // make sure to honor any reordered columns when re-rendering the add row content from a row template
+        if (this._columnsDestMap != null) {
+          var renderedCells = this._getPlaceHolderRowCells(placeHolderRow);
+          for (let i = 0; i < this._columnsDestMap.length; i++) {
+            var moveAddRowCell = renderedCells[this._columnsDestMap[i]];
+            moveAddRowCell.parentNode.appendChild(moveAddRowCell); // @HTMLUpdateOK
+          }
+        }
+      } else if (addRowCellTemplate !== null && this._isDefaultAddRowCellTemplateSlotValid()) {
+        var columns = this._getColumnDefs();
+        var columnsCount = columns.length;
+        for (var j = 0; j < columnsCount; j++) {
+          addRowCell = this._createTableBodyCell();
+          placeHolderRow.appendChild(addRowCell);
+          slotContext = this._getCellSlotTemplateContextObject({ columnIndex: j }, true);
+          slotContext.submitAddRow = submitAddRow;
+          var cellContent = templateEngine.execute(
+            componentElement,
+            addRowCellTemplate,
+            slotContext,
+            this.options.as,
+            tableBody
+          );
+          if (!(cellContent instanceof Array)) {
+            cellContent = [cellContent];
+          }
+          for (let i = 0; i < cellContent.length; i++) {
+            addRowCell.appendChild(cellContent[i]);
+          }
         }
       }
-    }
-    placeHolderRow.classList.add(Table.CSS_CLASSES._TABLE_ADD_ROW_PLACEHOLDER_CLASS);
+      placeHolderRow.classList.add(Table.CSS_CLASSES._TABLE_ADD_ROW_PLACEHOLDER_CLASS);
 
-    // set the cell attributes and styling.
-    var addRowCells = this._getPlaceHolderRowCells(placeHolderRow);
-    for (let i = 0; i < addRowCells.length; i++) {
-      addRowCell = addRowCells[i];
-      this._styleTableAddRowCell(i, addRowCell);
-    }
+      // set the cell attributes and styling.
+      var addRowCells = this._getPlaceHolderRowCells(placeHolderRow);
+      for (let i = 0; i < addRowCells.length; i++) {
+        addRowCell = addRowCells[i];
+        this._styleTableAddRowCell(i, addRowCell);
+      }
 
-    this._hasAddRowTemplate = true;
-    if (this._isDefaultSelectorEnabled()) {
-      // If multiple selection is enabled add placeholder cell in the selector place
-      addRowCell = document.createElement(Table.DOM_ELEMENT._TD); // @HTMLUpdateOK
-      placeHolderRow.insertBefore(addRowCell, placeHolderRow.firstChild); // @HTMLUpdateOK
-      addRowCell.classList.add(Table.CSS_CLASSES._TABLE_FROZEN_START);
-      if (this._isVerticalGridEnabled()) {
-        addRowCell.classList.add(Table.CSS_CLASSES._TABLE_VGRID_LINES_CLASS);
+      this._isAddRowRendered = true;
+      this._hasAddRowTemplate = true;
+      if (this._isDefaultSelectorEnabled()) {
+        // If multiple selection is enabled add placeholder cell in the selector place
+        addRowCell = document.createElement(Table.DOM_ELEMENT._TD); // @HTMLUpdateOK
+        placeHolderRow.insertBefore(addRowCell, placeHolderRow.firstChild); // @HTMLUpdateOK
+        addRowCell.classList.add(Table.CSS_CLASSES._TABLE_FROZEN_START);
+        if (this._isVerticalGridEnabled()) {
+          addRowCell.classList.add(Table.CSS_CLASSES._TABLE_VGRID_LINES_CLASS);
+        }
       }
+      if (this._isGutterStartColumnEnabled()) {
+        let tableGutterStart = this._createTableGutterCell('body', 'start');
+        placeHolderRow.insertBefore(tableGutterStart, placeHolderRow.firstChild); // @HTMLUpdateOK
+      }
+      if (this._isGutterEndColumnEnabled()) {
+        let tableGutterEnd = this._createTableGutterCell('body', 'end');
+        placeHolderRow.appendChild(tableGutterEnd); // @HTMLUpdateOK
+      }
+      if (!skipTopUpdate) {
+        this._getLayoutManager()._updateStickyRowTops();
+      }
+      return this._finalizeNonBodyRowRendering([placeHolderRow]);
     }
-    if (this._isGutterStartColumnEnabled()) {
-      let tableGutterStart = this._createTableGutterCell('body', 'start');
-      placeHolderRow.insertBefore(tableGutterStart, placeHolderRow.firstChild); // @HTMLUpdateOK
-    }
-    if (this._isGutterEndColumnEnabled()) {
-      let tableGutterEnd = this._createTableGutterCell('body', 'end');
-      placeHolderRow.appendChild(tableGutterEnd); // @HTMLUpdateOK
-    }
-    if (!skipTopUpdate) {
-      this._getLayoutManager()._updateStickyRowTops();
-    }
-    return this._finalizeNonBodyRowRendering([placeHolderRow]);
   }
   return Promise.resolve(false);
 };
@@ -6010,6 +6010,7 @@ Table.prototype._isAddNewRowEnabled = function () {
  * @private
  */
 Table.prototype._refreshAddRowDisplay = function () {
+  this._isAddRowRendered = false;
   return this._refreshAddNewRowPlaceholder().then(
     function (value) {
       this._getLayoutManager().notifyTableUpdate(Table._UPDATE._ADD_ROW_DISPLAY);
@@ -19618,8 +19619,8 @@ Table.prototype._setTableEditable = function (
       var newEditRowValue;
       var editAcceptPromiseArray = [];
 
-      // save the old editable row index
-      var prevEditableRowIdx = this._getEditableRowIdx();
+      // save the old editable row info
+      var prevEditableRowKey = this._getEditableRowKey();
 
       try {
         if (editable && !this._hasEditableRow()) {
@@ -19702,17 +19703,15 @@ Table.prototype._setTableEditable = function (
                     function () {
                       this._setCellInRowFocus(rowIdx, columnIdx, forwardSearch);
                       // clear out the old editable row
+                      // make sure the row still exists before we refresh it
+                      var prevEditableRowIdx = this._getRowIdxForRowKey(prevEditableRowKey);
                       if (prevEditableRowIdx != null) {
-                        // make sure the row still exists before we refresh it
-                        var prevEditableTableBodyRow = this._getTableBodyRow(prevEditableRowIdx);
-                        if (prevEditableTableBodyRow != null) {
-                          // re-render the previously editable row, which will be read-only now
-                          return this._refreshRow(prevEditableRowIdx, false).then(
-                            function () {
-                              this._isEditPending = false;
-                            }.bind(this)
-                          );
-                        }
+                        // re-render the previously editable row, which will be read-only now
+                        return this._refreshRow(prevEditableRowIdx, false).then(
+                          function () {
+                            this._isEditPending = false;
+                          }.bind(this)
+                        );
                       }
                       this._isEditPending = false;
                       return Promise.resolve();
@@ -19726,24 +19725,22 @@ Table.prototype._setTableEditable = function (
                 }
 
                 // clear out the old editable row
+                // make sure the row still exists before we refresh it
+                var prevEditableRowIdx = this._getRowIdxForRowKey(prevEditableRowKey);
                 if (prevEditableRowIdx != null) {
-                  // make sure the row still exists before we refresh it
-                  var prevEditableTableBodyRow = this._getTableBodyRow(prevEditableRowIdx);
-                  if (prevEditableTableBodyRow != null) {
-                    // re-render the previously editable row, which will be read-only now
-                    return this._refreshRow(prevEditableRowIdx, false).then(
-                      function () {
-                        this._isEditPending = false;
-                      }.bind(this)
-                    );
-                  }
+                  // re-render the previously editable row, which will be read-only now
+                  return this._refreshRow(prevEditableRowIdx, false).then(
+                    function () {
+                      this._isEditPending = false;
+                    }.bind(this)
+                  );
                 }
                 this._isEditPending = false;
                 return Promise.resolve();
               }.bind(this),
               function () {
                 this._removeSkeletonRow(rowIdx);
-                if (editable && prevEditableRowIdx == null) {
+                if (editable && prevEditableRowKey == null) {
                   this._syncActiveElement();
                 }
                 this._isEditPending = false;
@@ -19782,19 +19779,18 @@ Table.prototype._setTableEditable = function (
           this._getTable().focus();
         }
       }
-      // clear out the old editable row
-      if (prevEditableRowIdx != null) {
-        // make sure the row still exists before we refresh it
-        var prevEditableTableBodyRow = this._getTableBodyRow(prevEditableRowIdx);
-        if (prevEditableTableBodyRow != null) {
-          this._queueTask(
-            function () {
-              // re-render the previously editable row, which will be read-only now
-              return this._refreshRow(prevEditableRowIdx, false);
-            }.bind(this)
-          );
-        }
-      }
+      this._queueTask(
+        function () {
+          // clear out the old editable row
+          // make sure the row still exists before we refresh it
+          var prevEditableRowIdx = this._getRowIdxForRowKey(prevEditableRowKey);
+          if (prevEditableRowIdx != null) {
+            // re-render the previously editable row, which will be read-only now
+            return this._refreshRow(prevEditableRowIdx, false);
+          }
+          return Promise.resolve();
+        }.bind(this)
+      );
     }
   }
   return undefined;
@@ -19826,6 +19822,7 @@ Table.prototype._handleAddRow = function (canceled, event) {
         return Promise.all(addRowAcceptPromiseArray).then(
           function () {
             this._removeSkeletonRow(-1);
+            this._isAddRowRendered = false;
             return this._refreshAddNewRowPlaceholder().then(
               function () {
                 let placeHolderRow = this._getPlaceHolderRow();
@@ -19844,6 +19841,7 @@ Table.prototype._handleAddRow = function (canceled, event) {
       }.bind(this)
     );
   } else {
+    this._isAddRowRendered = false;
     this._refreshAddNewRowPlaceholder().then(
       function () {
         let placeHolderRow = this._getPlaceHolderRow();

package/dist/js/libs/oj/debug_esm/ojtimeline-toolkit.js

@@ -1877,27 +1877,39 @@ class DvtTimelineSeriesNode {
     if (discreteNavMode) {
       var navButtonBackgroundWidth = DvtTimelineStyleUtils.getNavButtonBackgroundWidth();
       edgeOffset = navButtonBackgroundWidth - padding;
-      var viewportIndexScroll = Math.floor(
-        (itemStartTime - timeline._viewStartTime) / timeline._initialViewportTimeDuration
+      var viewportDates = timeline.getDiscreteViewportDateOffsetPos(
+        timeline._discreteViewportCurrentIndexOffset
       );
-      var discreteViewportOffsetPos =
-        timeline.getDiscreteViewportDateOffsetPos(viewportIndexScroll);
-      startTime = discreteViewportOffsetPos.startDate;
-      endTime = discreteViewportOffsetPos.endDate;
+      startTime = viewportDates.startDate;
+      endTime = viewportDates.endDate;
     } else {
       edgeOffset = -padding;
       startTime = timeline._start;
       endTime = timeline._end;
     }
+    var availableWidthInside = this.getAvailableContentWidth();
+    // For items outside of visible viewport in discrete nav mode, we don't really care how we render them.
+    // For simplicity and to avoid needing to figure out the discrete nav page index for every item,
+    // return the inside width, so that content remain inside the bubble
+    // and that there's no overflow that may interfere with the stuff in the visible viewport.
+    // Note we can't return 0; it would be logical, but
+    // timeline can't handle 0 width content at the moment.
+    if (discreteNavMode && (itemEndTime < startTime || itemStartTime > endTime)) {
+      return Math.floor(availableWidthInside);
+    }
+
     var startLoc = timeline.getDatePos(startTime);
     var endLoc = timeline.getDatePos(endTime);
-    var availableWidthInside =
-      timeline.getDatePos(itemEndTime) - timeline.getDatePos(itemStartTime);
+
     var contentBubbleSpacing = DvtTimelineStyleUtils.getContentBubbleSpacing();
-    var availableWidthLeft =
-      timeline.getDatePos(itemStartTime) - contentBubbleSpacing - startLoc + edgeOffset;
-    var availableWidthRight =
-      endLoc - timeline.getDatePos(itemEndTime) - contentBubbleSpacing + edgeOffset;
+    var availableWidthLeft = Math.max(
+      0,
+      timeline.getDatePos(itemStartTime) - startLoc - contentBubbleSpacing + edgeOffset
+    );
+    var availableWidthRight = Math.max(
+      0,
+      endLoc - timeline.getDatePos(itemEndTime) - contentBubbleSpacing + edgeOffset
+    );
     return Math.floor(Math.max(availableWidthInside, availableWidthLeft, availableWidthRight));
   }
 
@@ -9031,7 +9043,9 @@ const DvtTimelineSeriesRenderer = {
       var endTime = item.getEndTime();
       if (endTime && endTime !== startTime) {
         var span = item._timeline.getDatePos(endTime) - loc;
-        loc = loc + Math.min(DvtTimelineStyleUtils.getDurationFeelerOffset(), span / 2);
+        if (item.getItemType() !== DvtTimelineSeriesNode.DURATION_EVENT) {
+          loc = loc + Math.min(DvtTimelineStyleUtils.getDurationFeelerOffset(), span / 2);
+        }
       }
       item.setLoc(loc);
       if (!series._isRandomItemLayout) item.setSpacing(null);
@@ -11916,13 +11930,34 @@ class Timeline extends TimeComponent {
    * Update the viewport when in discrete viewport navigation mode.
    */
   updateDiscreteViewport() {
-    DvtTimelineRenderer._renderAxis(this, this.getTimeZoomCanvas(), true);
-    DvtTimelineRenderer._renderNavigationArrows(this, this.getTimeZoomCanvas());
+    this.prepareViewportLength();
+    var navButtonBackgroundWidth = DvtTimelineStyleUtils.getNavButtonBackgroundWidth();
+    this._timeAxisRatio = (this._canvasLength - 2 * navButtonBackgroundWidth) / this._canvasLength;
+    this._discreteOffset =
+      (this.getContentLength() - this.getContentLength() * this._timeAxisRatio) / 2;
+    this._discreteContentLength = this.getContentLength() * this._timeAxisRatio;
+
+    this.renderTimeZoomCanvas(this._canvas);
+    this.updateSeries();
+    DvtTimelineRenderer._renderAxis(this, this._timeZoomCanvas);
+    DvtTimelineRenderer._renderNavigationArrows(this, this._timeZoomCanvas);
+    this.doInitialPan();
+
     if (this._hasOverview) {
       DvtTimelineRenderer._renderOverview(this);
+      // Reapply selections to overview region
+      if (this.SelectionHandler) {
+        var selection = this.SelectionHandler.getSelectedIds();
+        if (selection && selection.length !== 0) {
+          for (var i = 0; i < selection.length; i++) {
+            this._overview.selSelectItem(selection[i]);
+          }
+        }
+      }
+    }
+    if (this.isTimeDirScrollbarOn() || this.isContentDirScrollbarOn()) {
+      DvtTimelineRenderer._renderScrollbars(this);
     }
-    this.updateSeries();
-    DvtTimelineRenderer._renderScrollbars(this);
   }
 
   /**