@oracle/oraclejet 12.1.1 → 12.1.2

package/dist/css/stable/oj-stable.css

@@ -333,7 +333,7 @@
   visibility: hidden; }
 
 .oj-theme-json {
-  font-family: '{"name":"stable","targetPlatform":"all","behavior":"redwood","jetReleaseVersion":"v12.1.1"}' !important; }
+  font-family: '{"name":"stable","targetPlatform":"all","behavior":"redwood","jetReleaseVersion":"v12.1.2"}' !important; }
 
 .oj-helper-hidden-accessible {
   border: 0;

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

@@ -200,6 +200,34 @@ define(['exports', 'jqueryui-amd/widget', 'jqueryui-amd/unique-id', 'jqueryui-am
     }
   };
 
+  /**
+   * 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,
@@ -752,6 +780,20 @@ define(['exports', 'jqueryui-amd/widget', 'jqueryui-amd/unique-id', 'jqueryui-am
   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.
    *
@@ -2437,6 +2479,21 @@ define(['exports', 'jqueryui-amd/widget', 'jqueryui-amd/unique-id', 'jqueryui-am
   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
@@ -2604,18 +2661,7 @@ define(['exports', 'jqueryui-amd/widget', 'jqueryui-amd/unique-id', 'jqueryui-am
       }
 
       // 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) {
@@ -2738,12 +2784,16 @@ define(['exports', 'jqueryui-amd/widget', 'jqueryui-amd/unique-id', 'jqueryui-am
       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();
       }
@@ -2938,6 +2988,25 @@ define(['exports', 'jqueryui-amd/widget', 'jqueryui-amd/unique-id', 'jqueryui-am
         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/ojcore-base.js

@@ -37,12 +37,12 @@ define(['ojs/ojlogger'], function (Logger) { 'use strict';
      * @global
      * @member {string} version JET version numberr
      */
-    version: '12.1.1',
+    version: '12.1.2',
     /**
      * @global
      * @member {string} revision JET source code revision number
      */
-    revision: '2022-04-29_18-31-21',
+    revision: '2022-05-18_10-35-23',
 
     // 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/ojdatetimepicker.js

@@ -2778,7 +2778,12 @@ var __oj_input_date_time_metadata =
       childDiv.className = 'oj-datepicker-content';
       dpDiv.appendChild(childDiv);
       this._dpDiv = bindHover($(dpDiv));
-      document.body.appendChild(dpDiv); // @HTMLUpdateOK
+      // Append the dpDiv to the CE wrapper and for widgets simply to the body
+      if (this._IsCustomElement()) {
+        this._dpDiv.appendTo(this.OuterWrapper); // @HTMLUpdateOK
+      } else {
+        this._dpDiv.appendTo(document.body); // @HTMLUpdateOK
+      }
     },
 
     _createPopupDpDiv: function () {
@@ -2884,8 +2889,6 @@ var __oj_input_date_time_metadata =
         // http://bugs.jqueryui.com/ticket/7552 - A Datepicker created on a detached div has zero height
         this._dpDiv.css('display', 'block');
 
-        this._registerSwipeHandler();
-
         // For this to be accessible, the root dom element needs role/aria-labelledby.
         const rootDomElem = this.widget();
         rootDomElem[0].setAttribute('role', 'group');
@@ -2895,7 +2898,6 @@ var __oj_input_date_time_metadata =
         this._processReadOnlyKeyboardEdit();
         if (this.options.readOnly !== true) {
           this._attachTrigger();
-          this._registerSwipeHandler();
         }
       }
 
@@ -3248,6 +3250,11 @@ var __oj_input_date_time_metadata =
           this._setupResizePopupBind();
         }
       }
+
+      if (this._dpDiv && (this._isInLine || (this.options.readOnly !== true))) {
+        this._registerSwipeHandler();
+      }
+
       return this._super();
     },
 
@@ -3294,6 +3301,8 @@ var __oj_input_date_time_metadata =
       // for non custom element, this is done as first step in destroy
       if (this._IsCustomElement()) {
         this._cleanUpListeners();
+
+        this._unregisterSwipeHandler();
       }
       return this._super();
     },
@@ -4451,6 +4460,12 @@ var __oj_input_date_time_metadata =
       }
     },
 
+    _unregisterSwipeHandler: function () {
+      if (this._dpDiv) {
+        this._dpDiv.off('swiperight swipeleft').ojHammer('destroy');
+      }
+    },
+
     /**
      * If min or max lacks date portion and value contains it, then min + max should use
      * value's date portion
@@ -8873,8 +8888,9 @@ var __oj_input_date_time_metadata =
       },
 
       _getPrependNode: function () {
+        const independentPrependNode = this._IsCustomElement() ? $(this.OuterWrapper) : $('body');
         return this._isIndependentInput() ?
-          $('body') :
+          independentPrependNode :
           $('.oj-popup-content', this._datePickerComp.widget._popUpDpDiv.ojPopup('widget'));
       },
 
@@ -9335,6 +9351,8 @@ var __oj_input_date_time_metadata =
           var children = group.children;
           for (var index = 0; index < children.length; index++) {
             wheel = children[index];
+            // This calls Wheel#destroy() and this calls off on each
+            // event listener and destroys Hammer.
             wheel.ojDestroy();
           }
         }
@@ -9370,10 +9388,14 @@ var __oj_input_date_time_metadata =
        * @override
        */
       _ReleaseResources: function () {
-        // for non custom element, this is done as first step in destroy
-        if (this._IsCustomElement()) {
-          this._cleanUpListeners();
-        }
+        // Since destroy calls _ReleaseResources, we do here for both CustomElement and non CustomElement
+        // instead of doing it here for CustomElement and in destroy which is only for non CustomElements.
+        this._removeResizePopupBind();
+        // Note: We do not have a symmetrical 'createHammer' call in SetupResources.
+        // We create the timepicker wheels that have the Hammer events
+        // when the user clicks on the timepicker icon, or when
+        // the component's options change.
+        this._destroyHammer();
         return this._super();
       },
 
@@ -9394,8 +9416,6 @@ var __oj_input_date_time_metadata =
           this._triggerNode.remove();
         }
 
-        this._cleanUpListeners();
-        this._destroyHammer();
         if (this._wheelPicker) {
           this._wheelPicker.remove();
           this._clearWheelModels();
@@ -9409,7 +9429,7 @@ var __oj_input_date_time_metadata =
      * @ignore
      * @private
      */
-      _cleanUpListeners: function () {
+     _removeResizePopupBind: function () {
         if (this._resizePopupBind) {
           window.removeEventListener('resize', this._resizePopupBind);
         }
@@ -12179,6 +12199,53 @@ var __oj_input_date_time_metadata =
 
       return retVal;
     },
+
+    /**
+     * @ignore
+     * @protected
+     * @override
+     * @memberof oj.ojInputDateTime
+     */
+    _ReleaseResources: function () {
+      if (this._IsCustomElement()) {
+        // Trigger the ojInputTime's _ReleaseResources() using the ojInputTime instance.
+        // this._timePicker.ojInputTime('destroy') will not work.
+        // jqueryui-base#destroy will throw an error because IsCustomElement() is true
+        // and you cannot call destroy when IsCustomElement is true.
+        if (this._timePicker) {
+          const timePickerInstance = this._timePicker.ojInputTime('instance');
+          if (timePickerInstance) {
+            timePickerInstance._ReleaseResources();
+            this._timePickerResourcesReleased = true;
+          }
+        }
+      }
+      return this._super();
+    },
+
+    /**
+     * @protected
+     * @override
+     * @instance
+     * @memberof! oj.ojInputDateTime
+     */
+    _SetupResources: function () {
+      var ret = this._superApply(arguments);
+      if (this._IsCustomElement()) {
+        // oj-input-date-time's AfterCreate calls createTimepicker, which creates ojInputTime() which
+        // calls InputTime's _SetupResources.
+        // Then oj-input-date-time's SetupResources is called. Only call ojInputTime's _SetupResources
+        // if they were released in ReleaseResources, so check the flag.
+        if (this._timePickerResourcesReleased && this._timePicker) {
+          const timePickerInstance = this._timePicker.ojInputTime('instance');
+          if (timePickerInstance) {
+            timePickerInstance._SetupResources();
+            this._timePickerResourcesReleased = false;
+          }
+        }
+      }
+      return ret;
+    },
     /**
      * @ignore
      * @protected
@@ -12190,6 +12257,8 @@ var __oj_input_date_time_metadata =
       return this._super();
     },
     /**
+     * Called from _destroy. This is for widgets. Cleaning up custom
+     * elements is done in ReleaseResources
      * @ignore
      * @private
      * @memberof oj.ojInputDateTime
@@ -12210,6 +12279,7 @@ var __oj_input_date_time_metadata =
           this._switcherDiv.remove();
         }
     },
+
     /**
      * @ignore
      * @protected

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

@@ -404,7 +404,7 @@ define(['exports', 'ojs/ojvcomponent', 'preact', 'jquery', 'ojs/ojanimation', 'o
                 this.getStateToChangeTo(edge)) {
                 this.animateClose(edge)
                     .then(() => {
-                    DomUtils.removeResizeListener(this.rootRef.current, this.reflowDrawerResizeListener);
+                    DomUtils.removeResizeListener(this.getDrawerRef(edge).current, this.reflowDrawerResizeListener);
                     this.reflowDrawerResizeListener === null;
                     if (this.getStateToChangeTo(edge)) {
                         const updatedState = {};
@@ -578,7 +578,7 @@ define(['exports', 'ojs/ojvcomponent', 'preact', 'jquery', 'ojs/ojanimation', 'o
         }
         beforeCloseHandler(edge) {
             ojdrawerutils.DrawerUtils.disableBodyOverflow();
-            DomUtils.removeResizeListener(this.rootRef.current, this.overlayDrawerResizeListener);
+            DomUtils.removeResizeListener(this.getDrawerRef(edge).current, this.overlayDrawerResizeListener);
             this.overlayDrawerResizeListener === null;
             return this.animateClose(edge);
         }

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/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;