@oracle/oraclejet 12.1.1 → 12.1.4

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

@@ -2973,6 +2973,44 @@ define(['exports', 'ojs/ojcore-base', 'ojs/ojcomponentcore', 'jquery', 'ojs/ojla
         }
       },
 
+      /**
+       * Override to release resources held by this component.
+       * It is important to unregister Hammer events
+       * since they live outside of the component's DOM and would cause Detached Dom nodes
+       * when the component is removed.
+       * @memberof oj.editableValue
+       * @instance
+       * @protected
+       */
+      _ReleaseResources: function () {
+        this._super();
+        if (this._IsCustomElement()) {
+          // componentMessaging#releaseResources removes any resources that would
+          // otherwise cause a memory leak, like Hammer.
+          // We do not deactivate component messaging because that is a bigger change, and
+          // more risky to backport.
+          this._getComponentMessaging().releaseResources();
+          this._hammerIsUnregistered = true;
+        }
+      },
+      /**
+       * @memberof oj.editableValue
+       * @instance
+       * @protected
+       */
+      _SetupResources: function () {
+        this._super();
+        // Since initComponentMessaging gets called during component creation, and that activates
+        // all the component strategies which in turn sets up listeners, we only want to
+        // re-set up resources and when we have
+        // released them in ReleaseResources.
+        if (this._IsCustomElement() && (this._hammerIsUnregistered)) {
+          const messaging = this._getComponentMessaging();
+          messaging.setupResources();
+          this._hammerIsUnregistered = false;
+        }
+      },
+
       /**
        * If we have asynchronous converter loading, the input is readonly and a loading indicator
        * is shown to the user.
@@ -7491,8 +7529,7 @@ define(['exports', 'ojs/ojcore-base', 'ojs/ojcomponentcore', 'jquery', 'ojs/ojla
     jqLauncher[0].removeEventListener('change', this._eatChangeAndClickOnPress, true);
 
     if (DomUtils.isTouchSupported()) {
-      jqLauncher.ojHammer().off('press');
-      jqLauncher.ojHammer('destroy');
+      this.releaseResources();
       jqLauncher.off('contextmenu', this._eatContextMenuOnOpenPopupListener);
       this._eatContextMenuOnOpenPopupListener = null;
       this._inPressEvent = null;
@@ -7509,55 +7546,39 @@ define(['exports', 'ojs/ojcore-base', 'ojs/ojcomponentcore', 'jquery', 'ojs/ojla
   PopupMessagingStrategy.prototype._registerLauncherEvents = function () {
     var closeEvents;
     var closePopupCallback;
-    var compDefaults;
-    var events;
-    var hammerOptions;
     var jqLauncher = this.GetLauncher();
     var nonPressOpenEvents;
-    var openPopupCallback;
-    var pressEventIndex;
 
-    compDefaults = PopupMessagingStrategy._DEFAULTS_BY_COMPONENT[this.GetComponent().widgetName];
-    events = compDefaults ? compDefaults.events :
-             PopupMessagingStrategy._DEFAULTS_BY_COMPONENT.default.events;
+    const events = this._getPopupEventNamesToRegisterForComp();
 
     // 1. associate the ojPopup component to wrapper <div> for popup content
     // 2. wire up on() event handlers for registered events that open and close popup. E.g., focusin.
     // 3. autoDismissal happens automatically when focus leaves component. For other events like
     // mouseover it's required to call off()
     if (events.open) {
-      openPopupCallback = this._openPopupCallback;
-      if (!openPopupCallback) {
-        openPopupCallback = this._openPopup.bind(this);
-        this._openPopupCallback = openPopupCallback;
+      if (!this._openPopupCallback) {
+        this._openPopupCallback = this._openPopup.bind(this);
       }
 
       // separate out press event, namespace the events string, and attach event handler
-      pressEventIndex = events.open.indexOf('press');
+      const needsPressEvent = this._needsPressEvent(events);
       nonPressOpenEvents =
       this._getNamespacedEvents(events.open.replace('press', ''),
                                 PopupMessagingStrategy._OPEN_NAMESPACE);
-      jqLauncher.on(nonPressOpenEvents, openPopupCallback);
+      jqLauncher.on(nonPressOpenEvents, this._openPopupCallback);
 
       // The pressHold gesture also fires a contextmenu event on Windows 10 touch.
       // Prevent that here for components that use 'press' for popup messaging as
       // the context menu causes the popup message window to close. Note that this
       // means the context menu will be disabled for these components.
-      if (DomUtils.isTouchSupported() && pressEventIndex !== -1) {
+      if (DomUtils.isTouchSupported() && needsPressEvent) {
         this._eatContextMenuOnOpenPopupListener = function () {
           return false;
         };
 
         jqLauncher.on('contextmenu', this._eatContextMenuOnOpenPopupListener);
 
-        // for radios and checkboxes, on ios, press hold brings up popup, but release closes it
-        // and checks it, so in this case we have to eat the click/change events. this happens
-        // in the openPopupCallback
-        hammerOptions = {
-          recognizers: [
-            [Hammer.Press, { time: 750 }]
-          ] };
-        jqLauncher.ojHammer(hammerOptions).on('press', openPopupCallback);
+        this.registerHammerOpenCallbackOnLauncher();
       }
     }
 
@@ -7574,6 +7595,62 @@ define(['exports', 'ojs/ojcore-base', 'ojs/ojcomponentcore', 'jquery', 'ojs/ojla
     }
   };
 
+    /**
+     * Symmetrical method to releaseResources. Sets up resources that get
+     * removed in releaseResources.
+     * @private
+     * @memberof oj.PopupMessagingStrategy
+     * @instance
+     */
+    PopupMessagingStrategy.prototype.setupResources = function () {
+      const events = this._getPopupEventNamesToRegisterForComp();
+      const needsPressEvent = this._needsPressEvent(events);
+      if (DomUtils.isTouchSupported() && needsPressEvent) {
+        this.registerHammerOpenCallbackOnLauncher();
+      }
+    };
+
+    /**
+     * Register Hammer Press Event. Make sure you are on touch and you
+     * need the press event before calling this function.
+     * @private
+     * @memberof oj.PopupMessagingStrategy
+     * @instance
+     */
+    PopupMessagingStrategy.prototype.registerHammerOpenCallbackOnLauncher = function () {
+      const jqLauncher = this.GetLauncher();
+      if (jqLauncher == null) {
+        return;
+      }
+      // for radios and checkboxes, on ios, press hold brings up popup, but release closes it
+      // and checks it, so in this case we have to eat the click/change events. this happens
+      // in the openPopupCallback
+      const hammerOptions = {
+        recognizers: [
+          [Hammer.Press, { time: 750 }]
+        ] };
+      jqLauncher.ojHammer(hammerOptions).on('press', this._openPopupCallback);
+    };
+
+    /**
+    * Releases resources that would otherwise leak memory if they were not released
+    * when the component's dom is removed.
+    * For example, Hammer events are put on the document and will result in
+    * detached dom memory leak if not removed.
+    * @private
+    * @memberof oj.PopupMessagingStrategy
+    * @instance
+    */
+    PopupMessagingStrategy.prototype.releaseResources = function () {
+      PopupMessagingStrategy.superclass.update.call(this);
+      const events = this._getPopupEventNamesToRegisterForComp();
+      const needsPressEvent = this._needsPressEvent(events);
+      if (DomUtils.isTouchSupported() && needsPressEvent) {
+        const jqLauncher = this.GetLauncher();
+        jqLauncher.off('press').ojHammer('destroy');
+      }
+    };
+
   /**
    * Turn the events string into an array, add namespace, and turn it back into a string.
    * @param {string} events e.g., "focusin mousedown"
@@ -7648,6 +7725,34 @@ define(['exports', 'ojs/ojcore-base', 'ojs/ojcomponentcore', 'jquery', 'ojs/ojla
     return popupPositionOptions;
   };
 
+  /**
+   * Returns the events
+   *
+   * @private
+   * @memberof oj.PopupMessagingStrategy
+   * @instance
+   */
+  PopupMessagingStrategy.prototype._getPopupEventNamesToRegisterForComp = function () {
+    const compDefaults =
+      PopupMessagingStrategy._DEFAULTS_BY_COMPONENT[this.GetComponent().widgetName];
+    return compDefaults ? compDefaults.events :
+      PopupMessagingStrategy._DEFAULTS_BY_COMPONENT.default.events;
+  };
+
+  /**
+   * Returns true if it needs a press event.
+   *
+   * @private
+   * @memberof oj.PopupMessagingStrategy
+   * @instance
+   */
+  PopupMessagingStrategy.prototype._needsPressEvent = function (events) {
+     if (events && events.open) {
+      return events.open.indexOf('press') !== -1;
+     }
+     return false;
+  };
+
   /**
    * Returns a jquery element that a messaging popup is bound to.
    *

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

@@ -655,6 +655,38 @@ var __oj_form_layout_metadata =
       element.appendChild(ojForm); // @HTMLUpdateOK appending internally created DOM element
     };
 
+    /**
+     * In Chrome 103 - the relative/absolute positioning inside a multi-col layout is broken
+     * https://bugs.chromium.org/p/chromium/issues/detail?id=1338997
+     * This is to workaround this bug and make things render correctly for chromium browsers.
+     * This bug will be fixed in 104 and later.
+     */
+    // data-oj- attributes used to identify the workaround DOM
+    const _WORKAROUND_DOM_ATTR = 'data-oj-formlayout-workaround-dom';
+    // Form layout can have nested oj-form-layout, so query only for the direct child
+    const _WORKAROUND_DOM_SELECTOR = `:scope > [${_WORKAROUND_DOM_ATTR}]`;
+
+    /**
+     * Applies the workaround for the Chromium v103 bug
+     */
+    function _applyChromium103Workaround() {
+      const workaroundDiv = document.createElement('div');
+      workaroundDiv.style.display = 'table';
+      workaroundDiv.style.visibility = 'hidden';
+      workaroundDiv.setAttribute(_WORKAROUND_DOM_ATTR, ''); // @HTMLUpdateOK
+      ojForm.appendChild(workaroundDiv);
+    }
+
+    /**
+     * Removes the workaround for the Chromium v103 bug
+     */
+    function _removeChromium103Workaround() {
+      const workaroundDiv = ojForm.querySelector(_WORKAROUND_DOM_SELECTOR);
+      if (workaroundDiv) {
+        ojForm.removeChild(workaroundDiv);
+      }
+    }
+
     /**
      * Register event listeners for resize the container DOM element.
      * @param {Element} domElem  DOM element
@@ -793,6 +825,7 @@ var __oj_form_layout_metadata =
           self._rootElementMutationObserver.disconnect();
 
           _unregisterResizeListener(ojForm);
+          _removeChromium103Workaround();
 
           _updateOjFormDiv();
 
@@ -824,6 +857,7 @@ var __oj_form_layout_metadata =
           // we need to do this before the mutation observer is activated because this can add divs which
           // would fire the mutation observer and send it into a refresh->mutation loop.
           _registerResizeListener(ojForm);
+          _applyChromium103Workaround();
 
           // We are done making modifications to dom subtree elements so we should start paying attention
           // to mutations of the oj-form DIV subtree.  The mutations we care about are added elements and

package/dist/js/libs/oj/debug/ojgantt-toolkit.js

@@ -9804,7 +9804,7 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
     if (!isInitial && options.selectionBehavior === 'highlightDependencies') {
       var viewport = this._gantt.getViewPort();
       var dataLayoutManager = this._gantt.getDataLayoutManager();
-      dataLayoutManager.renderViewportDependencyLines(viewport, 'vpc_translate', selected ? this.getLayoutObject() : null);
+      dataLayoutManager.renderViewportDependencyLines(viewport, 'vpc_translate', { taskObj: this.getLayoutObject(), isSelected: selected });
     }
   };
 
@@ -12595,12 +12595,13 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
    * Based on current task selection, return a set of tasks connected to them
    * via dependencies. If targetTaskObj is specified, then that task is ensured to be included in the selection.
    * @param {string} action The action that triggered the viewport change. One of the DvtGanttDataLayoutManager.VPC_X strings.
-   * @param {Object=} targetTaskObj The target selected task. This should only be specified if the target task
-   *    is not in the selectionHandler's current selection (yet), i.e. this rendering is triggered by a task selection gesture
+   * @param {Object=} targetTask The target selected (or de-selected) task, of the shape { taskObj: taskObj, isSelected: boolean }.
+   *    This should only be specified if the target task is not in the selectionHandler's current selection (yet),
+   *    i.e. this rendering is triggered by a task selection/deselection gesture.
    * @returns {Object} { taskObjs: Array(taskObjs), dependencyObjs: Set(depObjs) }
    * @private
    */
-  DvtGanttDataLayoutManager.prototype._getSelectionDependencies = function (action, targetTaskObj) {
+  DvtGanttDataLayoutManager.prototype._getSelectionDependencies = function (action, targetTask) {
     var idTaskObjMap = this._createIdObjMap(this._rowObjs, 'taskObjs');
     var taskObjsSelected;
     if (action === DvtGanttDataLayoutManager.VPC_REFRESH) {
@@ -12610,40 +12611,42 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
     } else {
       taskObjsSelected = this._gantt.getSelectionHandler().getSelection().map(taskNode => taskNode.getLayoutObject());
     }
-    if (targetTaskObj) {
-      // targetTaskObj is specified if this rendering is triggered by a task selection gesture
-      // and so it's not in the selectionHandler's current selection (yet)
-      taskObjsSelected.push(targetTaskObj);
+
+    if (targetTask) {
+      // targetTask is specified if this rendering is triggered by a task selection (or de-selection) gesture
+      // The selectionHandler's selection is not up to date at this point yet.
+      if (targetTask.isSelected) {
+        taskObjsSelected.push(targetTask.taskObj);
+      } else {
+        taskObjsSelected = taskObjsSelected.filter(t => t !== targetTask.taskObj);
+      }
     }
 
-    var visitedTaskObjs = new Set();
-    var visitedDependencyObjs = new Set();
-    // Traverse dependencies to find connected tasks
-    var dfs = (taskObj) => {
+    var traverse = (taskObj, direction, visitedTaskObjs, visitedDependencyObjs) => {
       if (taskObj == null || visitedTaskObjs.has(taskObj) || !idTaskObjMap.has(taskObj['id'])) {
         return;
       }
-
       visitedTaskObjs.add(taskObj);
-      var taskObjNeighbors = new Set(taskObj.predecessorDepObjs.map(d => d.predecessorTaskObj).concat(
-        taskObj.successorDepObjs.map(d => d.successorTaskObj)
-      ));
-      taskObjNeighbors.forEach(t => dfs(t));
+      var taskObjNeighbors;
+      if (direction === 'up') {
+        taskObjNeighbors = taskObj.predecessorDepObjs.map(d => d.predecessorTaskObj);
+        taskObj.predecessorDepObjs.forEach(d => visitedDependencyObjs.add(d));
+      } else {
+        taskObjNeighbors = taskObj.successorDepObjs.map(d => d.successorTaskObj);
+        taskObj.successorDepObjs.forEach(d => visitedDependencyObjs.add(d));
+      }
+      taskObjNeighbors.forEach(t => traverse(t, direction, visitedTaskObjs, visitedDependencyObjs));
     };
 
-    // Start with each selected task and traverse its dependencies
-    taskObjsSelected.forEach(taskObj => dfs(taskObj));
-
-    visitedTaskObjs.forEach(taskObj => {
-      var predecessorDepObjs = taskObj.predecessorDepObjs;
-      predecessorDepObjs.forEach(depObj => {
-        visitedDependencyObjs.add(depObj);
-      });
-      var successorDepObjs = taskObj.successorDepObjs;
-      successorDepObjs.forEach(depObj => {
-        visitedDependencyObjs.add(depObj);
-      });
-    });
+    // Start with each selected task and traverse its dependencies upstream and downstream
+    var visitedTaskObjs = new Set();
+    var visitedDependencyObjs = new Set();
+    taskObjsSelected.forEach(taskObj => traverse(taskObj, 'up', visitedTaskObjs, visitedDependencyObjs));
+    // New set for tracking visited downstream tasks
+    var visitedDownstreamTaskObjs = new Set();
+    taskObjsSelected.forEach(taskObj => traverse(taskObj, 'down', visitedDownstreamTaskObjs, visitedDependencyObjs));
+    // merge upstream and downstream tasks objs
+    visitedDownstreamTaskObjs.forEach(t => visitedTaskObjs.add(t));
 
     return { taskObjs: Array.from(visitedTaskObjs), dependencyObjs: visitedDependencyObjs };
   };
@@ -12687,9 +12690,10 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
    * Renders viewport related dependency lines
    * @param {Object} viewport Object describing the viewport, of shape {minRowInd: number, maxRowInd: number, viewStartTime: number, viewEndTime: number}
    * @param {string} action The action that triggered the viewport change. One of the DvtGanttDataLayoutManager.VPC_X strings.
-   * @param {Object=} targetTaskObj The task that got selected by the user that triggered this call (optional)
+   * @param {Object=} targetTask The task that got selected (or de-selected) by the user that triggered this call (optional).
+   *     This should be of the shape { taskObj: taskObj, isSelected: boolean }
    */
-  DvtGanttDataLayoutManager.prototype.renderViewportDependencyLines = function (viewport, action, targetTaskObj) {
+  DvtGanttDataLayoutManager.prototype.renderViewportDependencyLines = function (viewport, action, targetTask) {
     var dependenciesContainer = this._gantt.getDependenciesContainer();
     if (dependenciesContainer) {
       dependenciesContainer.removeChildren();
@@ -12699,7 +12703,7 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
     if (this._gantt.getOptions()['selectionBehavior'] === 'highlightDependencies') {
       // "highlightDependencies" selection behavior: only dependencies related to the selected tasks are shown
       // and dim all other tasks
-      var selectionDeps = this._getSelectionDependencies(action, targetTaskObj);
+      var selectionDeps = this._getSelectionDependencies(action, targetTask);
       this.highlightTasks(selectionDeps.taskObjs);
       dependencyObjs = selectionDeps.dependencyObjs;
     } else {

package/dist/js/libs/oj/debug/ojjquery-hammer.js

@@ -26,6 +26,7 @@ define(['ojs/ojlogger', 'hammerjs', 'jquery'], function (Logger, Hammer, $) { 'u
               hammer.destroy();
               $el.removeData('ojHammer');
             }
+            $el.off('remove.ojHammer');
           });
 
         default:
@@ -33,7 +34,13 @@ define(['ojs/ojlogger', 'hammerjs', 'jquery'], function (Logger, Hammer, $) { 'u
           return this.each(function () {
             var $el = $(this);
             if (!$el.data('ojHammer')) {
-              $el.data('ojHammer', new Hammer.Manager($el[0], options));
+              const mgr = new Hammer.Manager($el[0], options);
+              $el.on('remove.ojHammer', evt => {
+                if (evt.target === $el[0]) {
+                  mgr.destroy();
+                }
+              });
+              $el.data('ojHammer', mgr);
             }
           });
       }

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

@@ -8198,6 +8198,25 @@ var __oj_select_many_metadata =
         return $(contentStructure.join(''));
       },
 
+      // _OjMultiCombobox
+      _initContainer: function () {
+        _OjMultiCombobox.superclass._initContainer.apply(this, arguments);
+
+        // JET-50535 - focus lost from component when mouse down on dropdown (Similar to JET-47442)
+        // The editable table relies on the focus events from the popup to determine whether
+        // or not the table should be edit mode. Initially when clicking on the combobox,
+        // the initial focus is on the input element. At this point, when one clicks on
+        // an option item, the focus will be lost on mousedown. Since, none of the other elements
+        // in the dropdown are focusable, the focus is transferred to the first focusable ancestor
+        // which in this case happens to be the body element. This results in the focusout event
+        // on the popup. As the selection only happens on the mouseup event, if one keeps the mouse
+        // pressed long enough, the table will exit the edit mode before the selection happens.
+        // Since, we are not relying on the physical focus anyway for selection mechanism, a patchy
+        // solution here would be to prevent the focus transfer when one clicks in the results area.
+        // This way the table would stay in edit mode.
+        this.dropdown.on('mousedown', _ComboUtils.killEvent);
+      },
+
       _opening: function (event, dontUpdateResults) {
         // if beforeExpand is not cancelled
         // beforeExpand event will be triggered in base class _shouldOpen method
@@ -9431,6 +9450,25 @@ var __oj_select_many_metadata =
         this._endSlot = null;
       },
 
+      // _OjSingleCombobox
+      _initContainer: function () {
+        _OjSingleCombobox.superclass._initContainer.apply(this, arguments);
+
+        // JET-50535 - focus lost from component when mouse down on dropdown (Similar to JET-47442)
+        // The editable table relies on the focus events from the popup to determine whether
+        // or not the table should be edit mode. Initially when clicking on the combobox,
+        // the initial focus is on the input element. At this point, when one clicks on
+        // an option item, the focus will be lost on mousedown. Since, none of the other elements
+        // in the dropdown are focusable, the focus is transferred to the first focusable ancestor
+        // which in this case happens to be the body element. This results in the focusout event
+        // on the popup. As the selection only happens on the mouseup event, if one keeps the mouse
+        // pressed long enough, the table will exit the edit mode before the selection happens.
+        // Since, we are not relying on the physical focus anyway for selection mechanism, a patchy
+        // solution here would be to prevent the focus transfer when one clicks in the results area.
+        // This way the table would stay in edit mode.
+        this.dropdown.on('mousedown', _ComboUtils.killEvent);
+      },
+
       _triggerValueUpdatedEvent: function (data, previousValue) {
         if (!this.ojContext._IsCustomElement()) {
           return;

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

@@ -88,7 +88,7 @@ define(['exports', 'preact', 'ojs/ojvcomponent', 'ojs/ojtranslation', 'ojs/ojdat
             }
             const vnodes = this.renderItem(key, index, data);
             this.decorateItem(vnodes, key, index, initialFetch, visible);
-            return vnodes;
+            return vnodes[0];
         }
         renderItem(key, index, data) {
             const renderer = this.callback.getItemRenderer();
@@ -220,7 +220,7 @@ define(['exports', 'preact', 'ojs/ojvcomponent', 'ojs/ojtranslation', 'ojs/ojdat
             }
             const vnodes = this.renderItem(metadata, index, data);
             this.decorateItem(vnodes, metadata, index, initialFetch, visible);
-            return vnodes;
+            return vnodes[0];
         }
         renderItem(metadata, index, data) {
             const key = metadata.key;

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

@@ -212,6 +212,34 @@ ComponentMessaging.prototype.close = function () {
   }
 };
 
+/**
+ * Releases resources that would otherwise leak memory if they were not released
+ * when the component's dom is removed.
+ * For example, Hammer events are put on the document and will result in
+ * detached dom memory leak if not removed.
+ * @private
+ */
+ ComponentMessaging.prototype.releaseResources = function () {
+  if (this._activated) {
+    $.each(this._strategies, function (i, strategy) {
+      strategy.releaseResources();
+    });
+  }
+};
+
+/**
+ * Symmetrical method to releaseResources. Sets up resources that get
+ * removed in releaseResources.
+ * @private
+ */
+ ComponentMessaging.prototype.setupResources = function () {
+  if (this._activated) {
+    $.each(this._strategies, function (i, strategy) {
+      strategy.setupResources();
+    });
+  }
+};
+
 /**
  * Creates a messaging strategy for the specified type, initializing it with the options provided.
  * @param {string|number} type defined by oj.ComponentMessaging._STRATEGY_TYPE. For example,
@@ -764,6 +792,20 @@ MessagingStrategy.prototype.deactivate = function () {
 MessagingStrategy.prototype.close = function () {
 };
 
+/**
+ *
+ * @private
+ */
+ MessagingStrategy.prototype.setupResources = function () {
+};
+
+/**
+ *
+ * @private
+ */
+ MessagingStrategy.prototype.releaseResources = function () {
+};
+
 /**
  * Reinitializes with the new display options and updates component messaging using the new content.
  *
@@ -2449,6 +2491,21 @@ const CustomElementBridge = {};
 CustomElementBridge.proto = Object.create(oj.BaseCustomElementBridge.proto);
 oj._registerLegacyNamespaceProp('CustomElementBridge', CustomElementBridge);
 
+const getFocusEventPropagator = function (element, type) {
+  return function (event) {
+    // Ensure that the target is the custom element, not the inner element, so create
+    // a new event and dispatch on the custom element.
+    element.dispatchEvent(new FocusEvent(type, { relatedTarget: event.relatedTarget }));
+  };
+};
+
+const getTeardownFunction = function (element, focusPropagator, blurPropagator) {
+  return function () {
+    element.removeEventListener('focus', focusPropagator);
+    element.removeEventListener('blur', blurPropagator);
+  };
+};
+
 oj.CollectionUtils.copyInto(CustomElementBridge.proto, {
   // Provides a promise for JET's Knockout throttling timeout
   // when knockout is used for the component
@@ -2616,18 +2673,7 @@ oj.CollectionUtils.copyInto(CustomElementBridge.proto, {
     }
 
     // Setup blur/focus listeners on inner element so we can trigger on the root custom element for 
-    var getFocusEventPropagator = function (type) {
-      return function (event) {
-        // Ensure that the target is the custom element, not the inner element, so create
-        // a new event and dispatch on the custom element.
-        element.dispatchEvent(new FocusEvent(type, { relatedTarget: event.relatedTarget }));
-      };
-    };
-    var focusElem = this._WIDGET_INSTANCE.__getFocusElement();
-    if (focusElem && focusElem !== element) {
-      focusElem.addEventListener('focus', getFocusEventPropagator('focus'));
-      focusElem.addEventListener('blur', getFocusEventPropagator('blur'));
-    }
+    this._setupFocusPropagation(element);
   },
 
   DefineMethodCallback: function (proto, method, methodMeta) {
@@ -2750,12 +2796,16 @@ oj.CollectionUtils.copyInto(CustomElementBridge.proto, {
     if (Components.__GetWidgetConstructor(this._WIDGET_ELEM) && this._WIDGET_INSTANCE) {
       this._WIDGET_INSTANCE.__handleDisconnected();
     }
+
+    this._teardownFocusPropagation(element);
   },
 
   HandleReattached: function (element) {
     // Invoke callback on the superclass
     oj.BaseCustomElementBridge.proto.HandleReattached.call(this, element);
 
+    this._setupFocusPropagation(element);
+
     if (this._WIDGET_INSTANCE) {
       this._WIDGET_INSTANCE.__handleConnected();
     }
@@ -2950,6 +3000,25 @@ oj.CollectionUtils.copyInto(CustomElementBridge.proto, {
       elem[prop] = value;
     }
     return isEvent;
+  },
+
+  _setupFocusPropagation: function (element) {
+    // Setup blur/focus listeners on inner element so we can trigger on the root custom element for 
+    const focusElem = this._WIDGET_INSTANCE.__getFocusElement();
+    if (focusElem && focusElem !== element) {
+      const focusPropagator = getFocusEventPropagator(element, 'focus');
+      const blurPropagator = getFocusEventPropagator(element, 'blur');
+      focusElem.addEventListener('focus', focusPropagator);
+      focusElem.addEventListener('blur', blurPropagator);
+      this._teardownFocus = getTeardownFunction(focusElem, focusPropagator, blurPropagator);
+    }
+  },
+
+  _teardownFocusPropagation: function () {
+    if (this._teardownFocus) {
+      this._teardownFocus();
+      this._teardownFocus = null;
+    }
   }
 });
 

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

@@ -37,12 +37,12 @@ const oj = {
    * @global
    * @member {string} version JET version numberr
    */
-  version: '12.1.1',
+  version: '12.1.4',
   /**
    * @global
    * @member {string} revision JET source code revision number
    */
-  revision: '2022-04-29_18-31-21',
+  revision: '2022-07-05_18-07-33',
 
   // 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/ojdataproviderscroller.js

@@ -1304,9 +1304,18 @@ DataProviderContentHandler.prototype.animateShowContent =
               }
             });
 
-            window.requestAnimationFrame(function () {
-              fadeIn(parentElem, { duration: '150ms', persist: 'all' });
-            });
+            // use setTimeout instead of requestAnimationFrame since that might not invoke by some browser
+            // if the tab/page is hidden for example
+            setTimeout(function () {
+              fadeIn(parentElem, { duration: '150ms', persist: 'all' }).then(function () {
+                // force opacity to be 1 in case if CSS transition did not happen
+                if (parseInt(parentElem.style.opacity, 10) === 0) {
+                  // eslint-disable-next-line no-param-reassign
+                  parentElem.style.opacity = 1;
+                }
+              });
+            }, 0);
+
             // can resolve immediately instead of waiting for fade in
             resolve(false);
           }.bind(this));