@oracle/oraclejet 14.0.5 → 14.1.0

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

@@ -23,22 +23,33 @@
  *
  * <p>If the logging options are changed at a later point, the Logger will use the modified options for the subsequent log operations.
  *
+ * <p>The logging level can be overridden via sessionStorage.setItem() call for the current browser session.
+ * Use 'ojet.logLevel' as the key with one of the following values: 'none' (least verbose), 'error', 'warning', 'info', 'log' (most verbose).
+ * Set the value in the browser console and refresh the browser in order for the value to take effect.
+ * </p>
+ * <h3> Session storage usage : </h3>
+ * <pre class="prettyprint">
+ * <code>
+ * // override logging level for the current session
+ * sessionStorage.setItem('ojet.logLevel', 'log');
+ * </code></pre>
+ *
  * <p>All the logging methods support string formatting, accept variable number of arguments and accept a function as a parameter.
  * When a callback function is specified as a parameter the function will be called if the log level is sufficient.
  *
- * <h3> Usage : </h3>
+ * <h3> Logger usage : </h3>
  * <pre class="prettyprint">
  * <code>
  * //optional calls, see defaults
- * oj.Logger.option("level",  oj.Logger.LEVEL_INFO);
- * oj.Logger.option("writer",  customWriter);  //an object that implements the following methods: log(), info(), warn(), error()
+ * Logger.option("level",  Logger.LEVEL_INFO);
+ * Logger.option("writer",  customWriter);  //an object that implements the following methods: log(), info(), warn(), error()
  *
  * // logging a message
- * oj.Logger.info("My log level is %d", oj.Logger.option("level"));  // string formatting
- * oj.Logger.warn("Beware of bugs", "in the above code");            // multiple parameters
+ * Logger.info("My log level is %d", Logger.option("level"));  // string formatting
+ * Logger.warn("Beware of bugs", "in the above code");            // multiple parameters
  *
  * // using a callback function as a parameter
- * oj.Logger.info(function(){
+ * Logger.info(function(){
  *    var foo = "This ";
  *    var bar = "is ";
  *    var zing = "a function";
@@ -105,6 +116,47 @@ Logger._METHOD_LOG = 'log';
 Logger._defaultOptions = { level: Logger.LEVEL_ERROR, writer: null };
 Logger._options = Logger._defaultOptions;
 
+/*
+ * Helper method that retrieves and parses session storage setting
+ */
+const _getSessionStorage = () => {
+  const sessionValue =
+    typeof window !== 'undefined' && window.sessionStorage !== undefined
+      ? sessionStorage.getItem('ojet.logLevel')
+      : undefined;
+  let logLevel;
+  switch (sessionValue) {
+    case 'none':
+      logLevel = Logger.LEVEL_NONE;
+      break;
+    case 'error':
+      logLevel = Logger.LEVEL_ERROR;
+      break;
+    case 'warning':
+      logLevel = Logger.LEVEL_WARN;
+      break;
+    case 'info':
+      logLevel = Logger.LEVEL_INFO;
+      break;
+    case 'log':
+      logLevel = Logger.LEVEL_LOG;
+      break;
+    default:
+      logLevel = undefined;
+  }
+  return logLevel;
+};
+
+/* SessionStorage setting */
+const _sessionStorage = _getSessionStorage();
+
+/*
+ * Helper method - returns current log level from session storage or options
+ */
+const _getLogLevel = () => {
+  return _sessionStorage || Logger._options.level;
+};
+
 /* public members*/
 /**
  * Writes an error message.
@@ -208,12 +260,23 @@ Logger.option = function (key, value) {
   if (arguments.length === 0) {
     keys = Object.keys(Logger._options);
     for (i = 0; i < keys.length; i++) {
-      ret[keys[i]] = Logger._options[keys[i]];
+      ret[keys[i]] = key === 'level' ? _getLogLevel() : Logger._options[keys[i]];
     }
     return ret;
   }
   if (typeof key === 'string' && value === undefined) {
-    return Logger._options[key] === undefined ? null : Logger._options[key];
+    let optValue;
+    switch (key) {
+      case 'level':
+        optValue = _getLogLevel();
+        break;
+      case 'writer':
+        optValue = Logger._options.writer;
+        break;
+      default:
+        optValue = null;
+    }
+    return optValue;
   }
 
   // setters

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

@@ -18,6 +18,7 @@ import { startAnimation } from 'ojs/ojanimation';
 import { warn } from 'ojs/ojlogger';
 import { getDeviceRenderMode } from 'ojs/ojconfig';
 import { CustomElementUtils } from 'ojs/ojcustomelement-utils';
+import { isElementRegistered } from 'ojs/ojcustomelement-registry';
 
 (function () {
   // -----------------------------------------------------------------------------
@@ -4327,7 +4328,7 @@ import { CustomElementUtils } from 'ojs/ojcustomelement-utils';
     ojMenu: {
       openOptions: createDynamicPropertyGetter(function (context) {
         var position;
-        if (CustomElementUtils.isElementRegistered(context.element.tagName)) {
+        if (isElementRegistered(context.element.tagName)) {
           if (context.containers.indexOf('ojMenu') >= 0) {
             position = {
               my: { horizontal: 'start', vertical: 'top' },

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

@@ -1201,6 +1201,12 @@ MessageViewModel.prototype._computeCategory = function () {
   }
 
   var severity = this._computeSeverity();
+
+  // If severity is none, return undefined as we do not want to show the category
+  if (severity === 'none') {
+    return undefined;
+  }
+
   var translations = this._properties.translations;
 
   var translatedCategory =
@@ -1926,6 +1932,9 @@ var __oj_message_metadata =
             "info": {
               "type": "string"
             },
+            "none": {
+              "type": "string"
+            },
             "warning": {
               "type": "string"
             }

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

@@ -1139,17 +1139,23 @@ MessagesViewModel.prototype._handleOpen = function (event) {
 };
 
 MessagesViewModel.prototype._updateLiveRegionAndContainer = function (message) {
-  var translations = getComponentTranslations('oj-ojMessage').categories;
+  const translations = getComponentTranslations('oj-ojMessage').categories;
 
   // oj.Message has 'fatal' severity which is no different from 'error', oj-message does not support
   //  'fatal' for this reason. Map 'fatal' to 'error' just to be compatible with cases where the
   //  message stream could come from existing oj.Message sources.
-  var severity = message.severity === 'fatal' ? 'error' : message.severity;
-  var category = !message.category ? translations[severity] : message.category;
-  var options = { category: category, summary: message.summary, detail: message.detail };
-
-  var liveRegion = this._getLiveRegion();
-  var text = this._getTranslationsDefault('ariaLiveRegion.newMessage', options);
+  const severity = (message.severity === 'fatal' ? 'error' : message.severity) || 'none';
+  const category = !message.category ? translations[severity] : message.category;
+  // check if the message has detail text or not (as it is an optional property)
+  // and determine which translation resource needs to be used.
+  const options = {
+    category: category,
+    summary: message.summary,
+    detail: message.detail || this._getTranslationsDefault('ariaLiveRegion.noDetail')
+  };
+
+  const liveRegion = this._getLiveRegion();
+  const text = this._getTranslationsDefault('ariaLiveRegion.newMessage', options);
   liveRegion.announce(text);
 
   this._refresh(); // re-evaluate the position as the overlay size can change.
@@ -2056,6 +2062,9 @@ var __oj_messages_metadata =
             },
             "newMessage": {
               "type": "string"
+            },
+            "noDetail": {
+              "type": "string"
             }
           }
         },

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

@@ -1402,6 +1402,13 @@ const _ojNavigationListView = _NavigationListUtils.clazz(
         return;
       }
       if ($target.hasClass(this.getNavListRemoveIcon()) && this.isTabBar()) {
+        // click on the 'X' should not change selection, but it should still change currentItem
+        this.HandleClickActive(item, event);
+        var contentElement = this.getItemContentElement(item);
+        if (contentElement.length > 0) {
+          // make sure it gets focus otherwise focus goes to the body as 'X' is no longer in DOM
+          contentElement[0].focus();
+        }
         this._handleRemove(event, item);
         return;
       }

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

@@ -4495,8 +4495,10 @@ const DvtNBoxNodeRenderer = {
               : ' oj-avatar-bg-' + bgColor + ' oj-nbox-node-initials-' + bgColor)
         );
         if (hasSource) {
+          // for ios use a smaller cropped image JET-53563
+          var isIos = Agent.os === 'ios';
           var iconContainer = new Container(nbox.getCtx());
-          var iconBackgroundSize = icon['backgroundSize'];
+          var iconBackgroundSize = isIos ? icon['backgroundIosSize'] : icon['backgroundSize'];
           var backgroundMarker = new ImageMarker(
             nbox.getCtx(),
             iconX,
@@ -4511,7 +4513,11 @@ const DvtNBoxNodeRenderer = {
           );
           iconContainer.addChild(iconMarker);
           iconContainer.addChild(backgroundMarker);
-          backgroundMarker.setClassName('oj-nbox-node-initials-background-pattern');
+          backgroundMarker.setClassName(
+            isIos
+              ? 'oj-nbox-node-initials-background-pattern oj-nbox-ios'
+              : 'oj-nbox-node-initials-background-pattern'
+          );
           iconMarker = iconContainer;
         }
 

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

@@ -2101,6 +2101,10 @@ oj.__registerWidget('oj.ojNBox', $.oj.dvtBaseComponent, {
       path: 'styleDefaults/nodeDefaults/iconDefaults/backgroundSize',
       property: 'width'
     };
+    styleClasses['oj-nbox-node-initials-background oj-nbox-ios'] = {
+      path: 'styleDefaults/nodeDefaults/iconDefaults/backgroundIosSize',
+      property: 'width'
+    };
     styleClasses['oj-nbox-node-categorylabel'] = {
       path: 'styleDefaults/_categoryNodeDefaults/labelStyle',
       property: 'TEXT'

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

@@ -186,8 +186,8 @@ import { CustomElementUtils } from 'ojs/ojcustomelement-utils';
    *   <li>"alertdialog" defines type of dialog that contains an alert message, where initial focus
    *       goes to an element within the dialog.</li>
    * </ul>
-   * The popup also adds the <code class="prettyprint">aria-describedby="popup-id"</code> attribute
-   * to the assocaited launcher while the popup is open.
+   * The non-modal (modeless) popup also adds the <code class="prettyprint">aria-describedby="popup-id"</code>
+   * attribute to the assocaited launcher while the popup is open.
    * </p>
    *
    * On platforms that support voice over mode (VO), the popup injects anchor tags "skip links"
@@ -196,12 +196,12 @@ import { CustomElementUtils } from 'ojs/ojcustomelement-utils';
    *  <ul>
    *    <li>A close link, {@link oj.ojPopup#translations.ariaCloseSkipLink}, is injected as a
    *        sibling to the popup's content. Activation of this link will close the popup.</li>
-   *    <li>For cases where the popup doesn't steal focus when it's open, a content navigation
+   *    <li>For cases where the non-modal popup doesn't steal focus when it's open, a content navigation
    *        skip link, {@link oj.ojPopup#translations.ariaFocusSkipLink}, is injected as a
    *        sibling to the launcher (first required argument of the open method). If the launcher
    *        selector targets a sub-element of the launcher, the skip link could be injected under
    *        the launcher, which can be problematic for oj-button as skip link activation will
-   *        also activate the associated launcher.</li>
+   *        also activate the associated launcher. The focus skip link is not injected for modal popups.</li>
    *  </ul>
    *
    * <p>One point often overlooked is making the gestures that launch a popup accessible.
@@ -1047,7 +1047,9 @@ import { CustomElementUtils } from 'ojs/ojcustomelement-utils';
       this._setPosition(position);
 
       this._setAutoDismiss(options.autoDismiss);
-      this._addDescribedBy();
+      if (options.modality !== 'modal') {
+        this._addDescribedBy();
+      }
 
       if (!this._IsCustomElement() || !element[0].hasAttribute('role')) {
         element.attr('role', options.role);
@@ -2243,38 +2245,46 @@ import { CustomElementUtils } from 'ojs/ojcustomelement-utils';
      * @private
      */
     _initVoiceOverAssist: function () {
+      var isModal = this.options.modality === 'modal';
       var isVOSupported =
         oj.AgentUtils.getAgentInfo().os === oj.AgentUtils.OS.IOS ||
         oj.AgentUtils.getAgentInfo().os === oj.AgentUtils.OS.ANDROID;
-      var liveRegion = this._liveRegion;
-      if (!liveRegion) {
-        liveRegion = new PopupLiveRegion();
-        this._liveRegion = liveRegion;
-      }
-
       var message;
-      var initialFocus = this._deriveInitialFocus();
-      if (isVOSupported) {
-        message = this.getTranslatedString(
-          initialFocus === 'none'
-            ? 'ariaLiveRegionInitialFocusNoneTouch'
-            : 'ariaLiveRegionInitialFocusFirstFocusableTouch'
-        );
-      } else {
-        message = this.getTranslatedString(
-          initialFocus === 'none'
-            ? 'ariaLiveRegionInitialFocusNone'
-            : 'ariaLiveRegionInitialFocusFirstFocusable'
-        );
+
+      if (!isModal) {
+        // for non-modal popups install the live region for keybard/VO navigation
+        var liveRegion = this._liveRegion;
+        if (!liveRegion) {
+          liveRegion = new PopupLiveRegion();
+          this._liveRegion = liveRegion;
+        }
+        var initialFocus = this._deriveInitialFocus();
+        if (isVOSupported) {
+          message = this.getTranslatedString(
+            initialFocus === 'none'
+              ? 'ariaLiveRegionInitialFocusNoneTouch'
+              : 'ariaLiveRegionInitialFocusFirstFocusableTouch'
+          );
+        } else {
+          message = this.getTranslatedString(
+            initialFocus === 'none'
+              ? 'ariaLiveRegionInitialFocusNone'
+              : 'ariaLiveRegionInitialFocusFirstFocusable'
+          );
+        }
+        liveRegion.announce(message);
       }
-      liveRegion.announce(message);
 
       if (isVOSupported) {
-        var focusSkipLinkId = this._getSubId('focusSkipLink');
-        var launcher = this._launcher;
-        var callback = this._intialFocus.bind(this, true);
-        message = this.getTranslatedString('ariaFocusSkipLink');
-        this._focusSkipLink = new PopupSkipLink(launcher, message, callback, focusSkipLinkId);
+        var callback;
+
+        if (!isModal) {
+          var focusSkipLinkId = this._getSubId('focusSkipLink');
+          var launcher = this._launcher;
+          callback = this._intialFocus.bind(this, true);
+          message = this.getTranslatedString('ariaFocusSkipLink');
+          this._focusSkipLink = new PopupSkipLink(launcher, message, callback, focusSkipLinkId);
+        }
 
         var content = this._content;
         var closeSkipLinkId = this._getSubId('closeSkipLink');
@@ -2290,8 +2300,10 @@ import { CustomElementUtils } from 'ojs/ojcustomelement-utils';
      */
     _destroyVoiceOverAssist: function () {
       var liveRegion = this._liveRegion;
-      liveRegion.destroy();
-      delete this._liveRegion;
+      if (liveRegion) {
+        liveRegion.destroy();
+        delete this._liveRegion;
+      }
 
       var focusSkipLink = this._focusSkipLink;
       if (focusSkipLink) {

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

@@ -1501,9 +1501,9 @@ ZOrderUtils.removeFromAncestorLayer = function (popup) {
 
   ZOrderUtils.preOrderVisit(layer, ZOrderUtils._closeDescendantPopupsCallback);
 
+  ZOrderUtils._removeOverlayFromAncestorLayer(layer);
   ZOrderUtils._resetAriaHiddenOnBackround(layer);
   ZOrderUtils._restoreBodyOverflow();
-  ZOrderUtils._removeOverlayFromAncestorLayer(layer);
 
   layer.removeData(ZOrderUtils._EVENTS_DATA);
   layer.removeData(ZOrderUtils._MODALITY_DATA);
@@ -1557,8 +1557,11 @@ ZOrderUtils._disableBodyOverflow = function (layer) {
 };
 
 ZOrderUtils._restoreBodyOverflow = function () {
-  const body = document.body;
-  body.classList.remove('oj-component-modal-open');
+  // if there are no more modals left, enable scrolling on body
+  if (!ZOrderUtils.hasModalDialogOpen()) {
+    const body = document.body;
+    body.classList.remove('oj-component-modal-open');
+  }
 };
 
 ZOrderUtils._removeFocusWithinFromOverlayedContent = function () {
@@ -3412,6 +3415,11 @@ PositionUtils.calcAvailablePopupSize = function (pos, feedback, withinElem) {
         }
       });
 
+      // JET-56620: normalize position left/top to integer values to avoid unnecessary
+      // repositioning caused by potential floating number oscillations
+      position.left = Math.round(position.left);
+      position.top = Math.round(position.top);
+
       if (options.using) {
         // Adds feedback as second argument to using callback, if present
         using = function (props) {

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

@@ -12,7 +12,7 @@ import 'ojs/ojlistview';
 import 'ojs/ojhighlighttext';
 import oj from 'ojs/ojcore-base';
 import $ from 'jquery';
-import { getReadingDirection, isAncestorOrSelf, isAncestor, recentPointer } from 'ojs/ojdomutils';
+import { getReadingDirection, isAncestorOrSelf, isAncestor } from 'ojs/ojdomutils';
 import { warn, error } from 'ojs/ojlogger';
 import { getDeviceType, getDeviceRenderMode, __getTemplateEngine } from 'ojs/ojconfig';
 import { getCachedCSSVarValues } from 'ojs/ojthemeutils';
@@ -932,6 +932,7 @@ LovDropdown.prototype.init = function (options) {
   this._isValueItemForPlaceholderFunc = options.isValueItemForPlaceholderFunc;
 
   this._currentFirstItem = null;
+  this._firstResultForKeyboardFocus = null;
   this._templateEngine = null;
   this._resultsCount = null;
   this._NO_RESULTS_FOUND_CLASSNAME = 'oj-listbox-searchselect-no-results';
@@ -1349,11 +1350,9 @@ LovDropdown.prototype._configureResults = function (searchText, selectedValue, i
   this._SetCurrentFirstItem(null);
 
   // JET-38215 - SELECT SINGLE - KEYBOARD NAVIGATION FOR COLLECTION TEMPLATE USAGE
-  // remove an existing focusin listener before deciding whether we need to add a new one
-  if (this._focusinListener) {
-    this._containerElem[0].removeEventListener('focusin', this._focusinListener);
-    this._focusListener = null;
-  }
+  // Original logic updated for JET-49906 - IN ACCESSIBILITY MODE, THE FIRST DROPDOWN VALUE IS READ TWICE
+  // remove the existing first result for keyboard focus
+  this._firstResultForKeyboardFocus = null;
 
   // This method is called only after the collection fetched the data
   // get the result count and store them
@@ -1839,11 +1838,9 @@ LovDropdown.prototype.close = function () {
   this._ClearSelection();
 
   // JET-38215 - SELECT SINGLE - KEYBOARD NAVIGATION FOR COLLECTION TEMPLATE USAGE
-  // remove the focusin listener now that we don't need it anymore
-  if (this._focusinListener) {
-    this._containerElem[0].removeEventListener('focusin', this._focusinListener);
-    this._focusListener = null;
-  }
+  // Original logic updated for JET-49906 - IN ACCESSIBILITY MODE, THE FIRST DROPDOWN VALUE IS READ TWICE
+  // remove the first result as we do not need it anymore
+  this._firstResultForKeyboardFocus = null;
 
   /** @type {!Object.<oj.PopupService.OPTION, ?>} */
   var psOptions = {};
@@ -2230,6 +2227,26 @@ LovDropdown.prototype.getResultsCount = function () {
   return this._resultsCount;
 };
 
+/**
+ * Focuses the collection component.
+ *
+ * @return {Promise} A promise indicating that focus has been set on the collection component
+ *
+ * @memberof LovDropdown
+ * @instance
+ * @public
+ * @ignore
+ */
+LovDropdown.prototype.focus = function () {
+  const resolveBusyState = this._addBusyStateFunc('LovDropdown focusing the collection component');
+  return this._handleCollectionFocus().then(
+    function () {
+      FocusUtils.focusFirstTabStop(this.getElement());
+      resolveBusyState();
+    }.bind(this)
+  );
+};
+
 /**
  * Sets the current first value item
  *
@@ -2267,6 +2284,7 @@ LovDropdown.prototype._addListenerForRowKeyProperty = function (currentRow) {
 };
 
 // JET-38215 - SELECT SINGLE - KEYBOARD NAVIGATION FOR COLLECTION TEMPLATE USAGE
+// Original logic updated for JET-49906 - IN ACCESSIBILITY MODE, THE FIRST DROPDOWN VALUE IS READ TWICE
 /**
  * Fetches the first result from the data provider and sets it as the current row if the
  * collection gets keyboard focus.
@@ -2279,13 +2297,13 @@ LovDropdown.prototype._addListenerForRowKeyProperty = function (currentRow) {
  */
 LovDropdown.prototype._FetchFirstResultForKeyboardFocus = function () {
   var busyContext = Context.getContext(this._containerElem[0]).getBusyContext();
+  this._firstResultForKeyboardFocus = null;
   return this._FetchFirstResult().then(
     function (data) {
       if (data != null) {
-        // if there are results, listen on focusin in order to set the first result as current so that
-        // the table header doesn't get focus
-        this._focusinListener = this._handleCollectionFocusinOnce.bind(this, data);
-        this._containerElem[0].addEventListener('focusin', this._focusinListener);
+        // if there are results, save the data so that it can be used for setting the
+        // current row when we need to focus the collection element.
+        this._firstResultForKeyboardFocus = data;
       }
       return busyContext.whenReady();
     }.bind(this)
@@ -2293,36 +2311,41 @@ LovDropdown.prototype._FetchFirstResultForKeyboardFocus = function () {
 };
 
 // JET-38215 - SELECT SINGLE - KEYBOARD NAVIGATION FOR COLLECTION TEMPLATE USAGE
+// Original logic updated for JET-49906 - IN ACCESSIBILITY MODE, THE FIRST DROPDOWN VALUE IS READ TWICE
 /**
- * Handle focusin on the collection in order to set the first result as the current row when
- * the collection receives focus via the keyboard.
+ * Setup collection component before focusing it. This sets the first result as the current row when
+ * the LovDropdown.focus is called.
  *
  * @memberof LovDropdown
  * @instance
  * @private
  */
-LovDropdown.prototype._handleCollectionFocusinOnce = function (data) {
-  this._containerElem[0].removeEventListener('focusin', this._focusinListener);
-  this._focusinListener = null;
-  // only focus the first row if focus was transferred via the keyboard
-  if (!recentPointer()) {
-    var resolveBusyState = this._addBusyStateFunc('LovDropdown setting selected KeySet on focusin');
+LovDropdown.prototype._handleCollectionFocus = function () {
+  var resolveBusyState = this._addBusyStateFunc('LovDropdown setting selected KeySet on focusin');
+
+  // ignore if we do not have first row data
+  if (!this._firstResultForKeyboardFocus) {
+    // Return a Promise to be consistent with the else path. Make sure to set and resolve the busy context.
+    return Promise.resolve().then(function () {
+      resolveBusyState();
+    });
+  }
 
-    // JET-39993 - Select2 options qunit tests fail using chrome and safari on Mac for master branch
-    // set flag while we're setting the collection current row and selected key set because we don't
-    // need to react to changes that we're pushing
-    this._handlingCollectionFocusinOnce = true;
+  // JET-39993 - Select2 options qunit tests fail using chrome and safari on Mac for master branch
+  // set flag while we're setting the collection current row and selected key set because we don't
+  // need to react to changes that we're pushing
+  this._handlingCollectionFocusinOnce = true;
 
-    this._SetCollectionCurrentRow({ rowKey: data.key });
+  this._SetCollectionCurrentRow({ rowKey: this._firstResultForKeyboardFocus.key });
 
-    var busyContext = Context.getContext(this._containerElem[0]).getBusyContext();
-    busyContext.whenReady().then(
-      function () {
-        this._handlingCollectionFocusinOnce = false;
-        resolveBusyState();
-      }.bind(this)
-    );
-  }
+  var busyContext = Context.getContext(this._containerElem[0]).getBusyContext();
+  return busyContext.whenReady().then(
+    function () {
+      this._handlingCollectionFocusinOnce = false;
+      this._firstResultForKeyboardFocus = null;
+      resolveBusyState();
+    }.bind(this)
+  );
 };
 
 /**
@@ -3777,17 +3800,23 @@ oj.__registerWidget('oj.ojSelectBase', $.oj.editableValue, {
 
     var abstractLovBase = this._abstractLovBase;
     var lovDropdown = this._lovDropdown;
+    var outerWrapper = this.OuterWrapper;
 
     switch (keyCode) {
       case LovUtils.KEYS.UP:
       case LovUtils.KEYS.DOWN:
         if (abstractLovBase.isDropdownOpen()) {
           // lovDropdown.transferHighlight((keyCode === LovUtils.KEYS.UP) ? -1 : 1);
-          FocusUtils.focusFirstTabStop(lovDropdown.getElement());
-
-          // keep oj-focus on root so that inside label is still shifted up and field looks focused
-          // while dropdown is open
-          this.OuterWrapper.classList.add('oj-focus');
+          lovDropdown.focus().then(function () {
+            // keep oj-focus on root so that inside label is still shifted up and field looks focused
+            // while dropdown is open.
+            // And since we are dealing with asynchronism here, make sure if the focus is still in the
+            // dropdown.
+            const dropdownElement = lovDropdown.getElement();
+            if (dropdownElement && dropdownElement.contains(document.activeElement)) {
+              outerWrapper.classList.add('oj-focus');
+            }
+          });
 
           // if tabbing into dropdown, continue showing filter field as it was before tabbing
           //  - ie11: filter field hidden when you arrow into dropdown

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

@@ -8409,16 +8409,28 @@ const _AbstractMultiChoice = _ComboUtils.clazz(_AbstractOjChoice, {
     items.forEach(
       function (item) {
         values.push(this.id(item));
-        valueOptions.push({
+
+        var newValueOption = {
           label: item.label,
           value: this.id(item)
-        });
+        };
 
         // populate data and metadata only when using a data provider
         if (isDataProvider) {
+          // JET-57010 - oj-select-many valueOptionsChanged event does not contain data
+          // and metadata
+          // include the data and metadata from the data provider in the item itself so that they
+          // will be included in the valueOptionsChanged event that gets fired, similar to what
+          // would happen if the user selected an item from the dropdown
+          newValueOption.data = item.data;
+          newValueOption.metadata = item.metadata;
           valueOptionsData.push(item.data);
           valueOptionsMetadata.push(item.metadata);
         }
+
+        // valueOptions is similar to value, but each item in the array is an object containing
+        // the value and label for that item
+        valueOptions.push(newValueOption);
       }.bind(this)
     );