@oracle/oraclejet 11.1.5 → 11.1.8

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

@@ -1172,11 +1172,7 @@ var __oj_checkboxset_metadata =
         }
 
         // if readonly, set tabindex on the wrapper
-        if (this.options.readOnly) {
-          let domElem = this.element[0];
-          let wrapperDom = domElem.querySelector('.oj-checkboxset-wrapper');
-          wrapperDom.setAttribute('tabindex', this._externalTabIndex);
-        }
+        this._updateReadonlyState();
         this._on(this._events);
         this._setup();
       },
@@ -1227,11 +1223,33 @@ var __oj_checkboxset_metadata =
    * @since 5.0.0
    */
       GetFocusElement: function () {
+        // JET-48463 - oj-table issue where focus is lost
+        // GetFocusElement() needs to return the correct readonly element
+        // If _GetReadonlyFocusElement() returns null, fallback to the
+        // enabled element logic.
+        if (this.options.readOnly === true) {
+          const readonlyFocusElement = this._GetReadonlyFocusElement();
+          if (readonlyFocusElement) {
+            return readonlyFocusElement;
+          }
+        }
         // We need :disabled here so that we don't try to focus on an element that isn't focusable.
         // :focusable doesn't work because this is called before the custom element is fully upgraded
         // and is still hidden in the DOM.
         return this._GetContentElement().not(':disabled').first()[0];
       },
+      /**
+       * oj-checkboxset doesn't use .oj-text-field-readonly for the focusable readonly content,
+       * so we need to use a different selector.
+       * @memberof oj.ojCheckboxset
+       * @instance
+       * @override
+       * @protected
+       * @return {Element|null}
+       */
+      _GetReadonlyFocusElement: function () {
+        return this.widget()[0].querySelector('.oj-form-control-container');
+      },
   /**
    * Sets the disabled option onto the dom.
    * This is a no-op for checkboxset since its root dom element is a div, and disabled is
@@ -2057,6 +2075,43 @@ var __oj_checkboxset_metadata =
 
         this.$checkboxes._ojRadioCheckbox('refreshDisabled'); // re-render disabled
       },
+
+      /**
+       * Updates the component's state based on whether or not it is in the readonly
+       * state.
+       * @private
+       * @memberof! oj.ojCheckboxSet
+       */
+       _updateReadonlyState: function () {
+        const wrapperDom = this.element[0].querySelector('.oj-checkboxset-wrapper');
+        if (this.options.readOnly) {
+          wrapperDom.setAttribute('tabindex', this._externalTabIndex);
+          this.element.addClass('oj-read-only');
+
+          // JET-49297 - reassess accessibility implementation of 'readonly' checkboxset
+          // In readonly mode, we will not have any checkbox input in the visible DOM. Thus,
+          // in this state it will just be showing generic text based on the value selected.
+          // So, we need to clean up the role along with the aria-labelledby attributes we added
+          // for that role to make things accessible.
+          this.element.removeAttr('role').removeAttr('aria-labelledby');
+          return;
+        }
+
+        // remove tabindex and role
+        wrapperDom.removeAttribute('tabindex');
+        this.element.removeClass('oj-read-only');
+
+        // JET-49297 - reassess accessibility implementation of 'readonly' checkboxset
+        // add back the role and aria attributes removed before
+        this.element.attr('role', 'group');
+        this._labelledByUpdatedForSet(
+          this.widget()[0].id,
+          null,
+          this.options.labelledBy,
+          this.widget()
+        );
+      },
+
   /**
    * @override
    * @private
@@ -2072,17 +2127,8 @@ var __oj_checkboxset_metadata =
             break;
           case 'readOnly':
             this.options.readOnly = !!value;
-            var wrapperDom = this.element[0].querySelector('.oj-checkboxset-wrapper');
             var val = this.options.value;
-            if (this.options.readOnly) {
-              wrapperDom.setAttribute('tabindex', this._externalTabIndex);
-              this.element.addClass('oj-read-only');
-            } else {
-              // remove tabindex and role
-              wrapperDom.removeAttribute('tabindex');
-              // remove oj-read-only class
-              this.element.removeClass('oj-read-only');
-            }
+            this._updateReadonlyState();
             this._ResetComponentState();
             // when toggle readonly to false, we need to check the initial set values.
             if (val != null) {

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.
  *
@@ -2427,6 +2469,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
@@ -2594,18 +2651,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) {
@@ -2728,12 +2774,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();
     }
@@ -2928,6 +2978,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: '11.1.5',
+  version: '11.1.8',
   /**
    * @global
    * @member {string} revision JET source code revision number
    */
-  revision: '2022-01-10_12-22-23',
+  revision: '2022-05-03_19-19-55',
 
   // This function is only meant to be used outside the library, so quoting the name
   // to avoid renaming is appropriate

package/dist/js/libs/oj/debug_esm/ojdatacollection-common.js

@@ -805,6 +805,19 @@ DataCollectionUtils.isElementInScrollerBounds = function (elem, scroller) {
   return (bounds.top >= top && bounds.bottom <= bottom);
 };
 
+/**
+ * Check for SDP-specific internal flag - not a public API
+ */
+DataCollectionUtils.isIterateAfterDoneNotAllowed = function (dataProvider) {
+  if (dataProvider && dataProvider.getCapability) {
+    var capability = dataProvider.getCapability('fetchFirst');
+    if (capability && capability.iterateAfterDone === 'notAllowed') {
+      return true;
+    }
+  }
+  return false;
+};
+
 /**
  * Whether browser supports requestIdleCallback
  */
@@ -826,6 +839,7 @@ const getAddEventKeysResult = DataCollectionUtils.getAddEventKeysResult;
 const getDefaultScrollBarWidth = DataCollectionUtils.getDefaultScrollBarWidth;
 const getFocusableElementsIncludingDisabled = DataCollectionUtils.getFocusableElementsIncludingDisabled;
 const isElementOrAncestorFocusable = DataCollectionUtils.isElementOrAncestorFocusable;
+const isIterateAfterDoneNotAllowed = DataCollectionUtils.isIterateAfterDoneNotAllowed;
 const getFocusableElementsInNode = DataCollectionUtils.getFocusableElementsInNode;
 const getLogicalChildPopup = DataCollectionUtils.getLogicalChildPopup;
 const getNoJQFocusHandlers = DataCollectionUtils.getNoJQFocusHandlers;
@@ -854,4 +868,4 @@ const calculateOffsetTop = DataCollectionUtils.calculateOffsetTop;
 const isElementInScrollerBounds = DataCollectionUtils.isElementInScrollerBounds;
 const isRequestIdleCallbackSupported = DataCollectionUtils.isRequestIdleCallbackSupported;
 
-export { CHECKVIEWPORT_THRESHOLD, KEYBOARD_KEYS, applyMergedInlineStyles, applyStyleObj, areKeySetsEqual, calculateOffsetTop, containsKey, convertStringToStyleObj, disableAllFocusableElements, disableDefaultBrowserStyling, disableElement, enableAllFocusableElements, getAddEventKeysResult, getDefaultScrollBarWidth, getFocusableElementsInNode, getFocusableElementsIncludingDisabled, getLogicalChildPopup, getNoJQFocusHandlers, handleActionablePrevTab, handleActionableTab, isArrowDownKeyEvent, isArrowLeftKeyEvent, isArrowRightKeyEvent, isArrowUpKeyEvent, isClickthroughDisabled, isElementInScrollerBounds, isElementOrAncestorFocusable, isEndKeyEvent, isEnterKeyEvent, isEscapeKeyEvent, isEventClickthroughDisabled, isF2KeyEvent, isFromDefaultSelector, isHomeKeyEvent, isLetterAKeyEvent, isMobileTouchDevice, isNumberFiveKeyEvent, isRequestIdleCallbackSupported, isSpaceBarKeyEvent, isTabKeyEvent };
+export { CHECKVIEWPORT_THRESHOLD, KEYBOARD_KEYS, applyMergedInlineStyles, applyStyleObj, areKeySetsEqual, calculateOffsetTop, containsKey, convertStringToStyleObj, disableAllFocusableElements, disableDefaultBrowserStyling, disableElement, enableAllFocusableElements, getAddEventKeysResult, getDefaultScrollBarWidth, getFocusableElementsInNode, getFocusableElementsIncludingDisabled, getLogicalChildPopup, getNoJQFocusHandlers, handleActionablePrevTab, handleActionableTab, isArrowDownKeyEvent, isArrowLeftKeyEvent, isArrowRightKeyEvent, isArrowUpKeyEvent, isClickthroughDisabled, isElementInScrollerBounds, isElementOrAncestorFocusable, isEndKeyEvent, isEnterKeyEvent, isEscapeKeyEvent, isEventClickthroughDisabled, isF2KeyEvent, isFromDefaultSelector, isHomeKeyEvent, isIterateAfterDoneNotAllowed, isLetterAKeyEvent, isMobileTouchDevice, isNumberFiveKeyEvent, isRequestIdleCallbackSupported, isSpaceBarKeyEvent, isTabKeyEvent };

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

@@ -11,7 +11,7 @@ import Context from 'ojs/ojcontext';
 import { __getTemplateEngine } from 'ojs/ojconfig';
 import { fadeOut, fadeIn } from 'ojs/ojanimation';
 import { log, error, info } from 'ojs/ojlogger';
-import { isRequestIdleCallbackSupported, calculateOffsetTop, getDefaultScrollBarWidth, isElementInScrollerBounds } from 'ojs/ojdatacollection-common';
+import { isRequestIdleCallbackSupported, calculateOffsetTop, getDefaultScrollBarWidth, isElementInScrollerBounds, isIterateAfterDoneNotAllowed } from 'ojs/ojdatacollection-common';
 import DomScroller from 'ojs/ojdomscroller';
 import KeySet from 'ojs/ojset';
 import KeyMap from 'ojs/ojmap';
@@ -2597,20 +2597,6 @@ IteratingDataProviderContentHandler.prototype.GetReferenceNode = function (paren
   return referenceNode;
 };
 
-/**
- * @private
- */
-IteratingDataProviderContentHandler.prototype._isIterateAfterDoneNotAllowed = function () {
-  var dataProvider = this.getDataProvider();
-  if (dataProvider && dataProvider.getCapability) {
-    var capability = dataProvider.getCapability('fetchFirst');
-    if (capability && capability.iterateAfterDone === 'notAllowed') {
-      return true;
-    }
-  }
-  return false;
-};
-
 /**
  * Gets the maximum index for insert event
  * @private
@@ -2618,7 +2604,8 @@ IteratingDataProviderContentHandler.prototype._isIterateAfterDoneNotAllowed = fu
 IteratingDataProviderContentHandler.prototype._getMaxIndexForInsert = function () {
   var max = Number.MAX_VALUE;
   // temporary solution for SDP
-  if (this._isIterateAfterDoneNotAllowed() && !this.hasMoreToFetch()) {
+  if (isIterateAfterDoneNotAllowed(this.getDataProvider()) &&
+      !this.hasMoreToFetch()) {
     return max;
   }
 
@@ -2666,7 +2653,8 @@ IteratingDataProviderContentHandler.prototype.addItemsForModelInsert =
           index = isBeforeKeys ? index : index + 1;
         } else if (this._isLoadMoreOnScroll()) {
           // if append to the end
-          if (!this._isIterateAfterDoneNotAllowed() || this.hasMoreToFetch()) {
+          if (!isIterateAfterDoneNotAllowed(this.getDataProvider()) ||
+              this.hasMoreToFetch()) {
             index = max;
           }
         }

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

@@ -2727,7 +2727,12 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
     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 () {
@@ -2830,13 +2835,10 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
       // Set display:block in place of inst._dpDiv.show() which won't work on disconnected elements
       // http://bugs.jqueryui.com/ticket/7552 - A Datepicker created on a detached div has zero height
       this._dpDiv.css('display', 'block');
-
-      this._registerSwipeHandler();
     } else {
       this._processReadOnlyKeyboardEdit();
       if (this.options.readOnly !== true) {
         this._attachTrigger();
-        this._registerSwipeHandler();
       }
     }
 
@@ -2845,11 +2847,21 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
     // passing in true to indicate that we want to show the popup of showOn is set
     // to 'focus'. If this isn't a custom element, we don't want to override the
     // focus functions.
+    // Also, when readonly is true, we just want to focus on the readonly element,
+    // as the popup isn't an issue.
     if (this._IsCustomElement()) {
       let comp = this._getRootElement();
-      let inputElem = this.GetFocusElement();
-      comp.focus = function () {
-        inputElem.focus(true);
+      // We need the input element here regardless of readonly state.
+      let inputElem = this._GetContentElement()[0];
+      comp.focus = () => {
+        const focusElem = this.GetFocusElement();
+        // we only want to call .focus(true) if it's the input elem that we added
+        // the custom focus callback on.
+        if (focusElem === inputElem) {
+          inputElem.focus(true);
+        } else {
+          focusElem.focus();
+        }
       };
 
       let proto = Object.getPrototypeOf(inputElem);
@@ -3138,6 +3150,11 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
         this._setupResizePopupBind();
       }
     }
+
+    if (this._dpDiv && (this._isInLine || (this.options.readOnly !== true))) {
+      this._registerSwipeHandler();
+    }
+
     return this._super();
   },
 
@@ -3184,6 +3201,8 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
     // for non custom element, this is done as first step in destroy
     if (this._IsCustomElement()) {
       this._cleanUpListeners();
+
+      this._unregisterSwipeHandler();
     }
     return this._super();
   },
@@ -4366,6 +4385,12 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
     }
   },
 
+  _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
@@ -8755,8 +8780,9 @@ oj.__registerWidget('oj.ojInputTime', $.oj.inputBase,
     },
 
     _getPrependNode: function () {
+      const independentPrependNode = this._IsCustomElement() ? $(this.OuterWrapper) : $('body');
       return this._isIndependentInput() ?
-        $('body') :
+        independentPrependNode :
         $('.oj-popup-content', this._datePickerComp.widget._popUpDpDiv.ojPopup('widget'));
     },
 
@@ -8938,11 +8964,18 @@ oj.__registerWidget('oj.ojInputTime', $.oj.inputBase,
       // passing in true to indicate that we want to show the popup of showOn is set
       // to 'focus'.  If this isn't a custom element, we don't want to override the
       // focus functions.
+      // Also, when readonly is true, we just want to focus on the readonly element,
+      // as the popup isn't an issue.
       if (this._IsCustomElement()) {
         let comp = this._getRootElement();
-        let inputElem = this.GetFocusElement();
-        comp.focus = function () {
-          inputElem.focus(true);
+        // We need the input element here regardless of readonly state.
+        let inputElem = this._GetContentElement()[0];
+        comp.focus = () => {
+          if (this.options.readOnly === true) {
+            this.GetFocusElement().focus(); // This should be the readonly focus element.
+          } else {
+            inputElem.focus(true);
+          }
         };
 
         let proto = Object.getPrototypeOf(inputElem);
@@ -9210,6 +9243,8 @@ oj.__registerWidget('oj.ojInputTime', $.oj.inputBase,
         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();
         }
       }
@@ -9245,10 +9280,14 @@ oj.__registerWidget('oj.ojInputTime', $.oj.inputBase,
      * @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();
     },
 
@@ -9269,8 +9308,6 @@ oj.__registerWidget('oj.ojInputTime', $.oj.inputBase,
         this._triggerNode.remove();
       }
 
-      this._cleanUpListeners();
-      this._destroyHammer();
       if (this._wheelPicker) {
         this._wheelPicker.remove();
         this._clearWheelModels();
@@ -9284,7 +9321,7 @@ oj.__registerWidget('oj.ojInputTime', $.oj.inputBase,
    * @ignore
    * @private
    */
-    _cleanUpListeners: function () {
+   _removeResizePopupBind: function () {
       if (this._resizePopupBind) {
         window.removeEventListener('resize', this._resizePopupBind);
       }
@@ -12020,6 +12057,53 @@ oj.__registerWidget('oj.ojInputDateTime', $.oj.ojInputDate, {
 
     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
@@ -12031,6 +12115,8 @@ oj.__registerWidget('oj.ojInputDateTime', $.oj.ojInputDate, {
     return this._super();
   },
   /**
+   * Called from _destroy. This is for widgets. Cleaning up custom
+   * elements is done in ReleaseResources
    * @ignore
    * @private
    * @memberof oj.ojInputDateTime
@@ -12051,6 +12137,7 @@ oj.__registerWidget('oj.ojInputDateTime', $.oj.ojInputDate, {
         this._switcherDiv.remove();
       }
   },
+
   /**
    * @ignore
    * @protected

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

@@ -11233,18 +11233,9 @@ TextUtils.getTextStringWidth = function (context, textString, cssStyle) {
       width = TextUtils._getCanvasTextWidth(context, textString, cssStyle);
     } else {
       // Properties that are supported in <canvas> elements by browser
-      // Chrome supports letterSpacing, wordSpacing, and fontVariantNumeric
-      // Safari supports only supports fontVariantNumeric
+      // Chrome and Safari supports only support fontVariantNumeric
       // Firefox supports none
-      if (Agent.browser === 'chrome') {
-        if (TextUtils._letterSpacing != letterSpacing || (TextUtils._wordSpacing != wordSpacing) || (TextUtils._fontVariantNumeric != fontVariantNumeric)) {
-          TextUtils._clearCanvasContext();
-          TextUtils._setSpacing(wordSpacing, letterSpacing, fontVariantNumeric);
-        }
-        TextUtils._storeCanvasContext();
-        TextUtils._attachCanvas(context);
-        width = TextUtils._getCanvasTextWidth(context, textString, cssStyle);
-      } else if (Agent.browser === 'safari' && isLetterSpacingNormal && isWordSpacingNormal) {
+      if ((Agent.browser === 'safari' || Agent.browser === 'chrome') && isLetterSpacingNormal && isWordSpacingNormal) {
         if (TextUtils._fontVariantNumeric != fontVariantNumeric) {
           TextUtils._clearCanvasContext();
           TextUtils._setSpacing(wordSpacing, letterSpacing, fontVariantNumeric);