@oracle/oraclejet 12.0.1 → 12.0.4

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

@@ -10,6 +10,7 @@ import { __GetWidgetConstructor, setDefaultOptions, createDynamicPropertyGetter,
 import $ from 'jquery';
 import 'ojs/ojlabel';
 import { parseJSONFromFontFamily } from 'ojs/ojthemeutils';
+import FocusUtils from 'ojs/ojfocusutils';
 import Context from 'ojs/ojcontext';
 import { error, info, warn } from 'ojs/ojlogger';
 import RequiredValidator from 'ojs/ojvalidator-required';
@@ -23,7 +24,6 @@ import { Press } from 'hammerjs';
 import 'ojs/ojjquery-hammer';
 import { isTouchSupported, isHTMLContent, cleanHtml, validateURL, makeFocusable } from 'ojs/ojdomutils';
 import { startAnimation } from 'ojs/ojanimation';
-import FocusUtils from 'ojs/ojfocusutils';
 
 /**
  * Base class for rendering the 'inside' labels. This is so InsideLabelStrategy
@@ -2982,6 +2982,44 @@ oj.__registerWidget('oj.editableValue', $.oj.baseComponent,
       }
     },
 
+    /**
+     * 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.
@@ -3078,6 +3116,20 @@ oj.__registerWidget('oj.editableValue', $.oj.baseComponent,
           this._placeholderOptionChanged(flags);
           break;
 
+        case 'readOnly':
+          if (this._retainFocusOnReadonlyChange) {
+            // This setTimeout call is needed to allow the dom to update before we
+            // get the focus element (or the element will still be hidden).
+            setTimeout(() => {
+              this.GetFocusElement().focus();
+              if (this._resolveBusyStateFocusRestore) {
+                this._resolveBusyStateFocusRestore();
+                delete this._resolveBusyStateFocusRestore;
+              }
+            }, 0);
+          }
+          break;
+
         case 'title':
           // Ignore title attribute for custom element components.
           if (!this._IsCustomElement()) {
@@ -3237,6 +3289,9 @@ oj.__registerWidget('oj.editableValue', $.oj.baseComponent,
     },
 
     /**
+     * JET-48463 - If we are in readonly mode, we call _GetReadonlyFocusElement, and fall back to
+     * _GetContentElement()[0] if _GetReadonlyFocusElement happens to return null.
+     * If not readonly, we just return _GetContentElement()[0]
      * @memberof oj.editableValue
      * @instance
      * @override
@@ -3244,7 +3299,20 @@ oj.__registerWidget('oj.editableValue', $.oj.baseComponent,
      * @since 5.0.0
      */
     GetFocusElement: function () {
-      return this._GetContentElement()[0];
+      return this.options.readOnly === true ?
+        this._GetReadonlyFocusElement() || this._GetContentElement()[0] :
+        this._GetContentElement()[0];
+    },
+
+    /**
+     * Returns the readonly focus element if there is a readonly specific element, otherwise null
+     * @memberof oj.editableValue
+     * @instance
+     * @protected
+     * @return {Element|null}
+     */
+    _GetReadonlyFocusElement: function () {
+      return this._getReadonlyDiv();
     },
 
     /**
@@ -3298,6 +3366,21 @@ oj.__registerWidget('oj.editableValue', $.oj.baseComponent,
           }
           break;
         case 'readOnly':
+          this._retainFocusOnReadonlyChange = FocusUtils.containsFocus(this.widget()[0]);
+          if (this._retainFocusOnReadonlyChange) {
+            if (!this._resolveBusyStateFocusRestore) {
+              var domElem = this.element[0];
+              var busyContext = Context.getContext(domElem).getBusyContext();
+              var description = 'Waiting for focus on the component ';
+
+              if (domElem && domElem.id) {
+                description += `with id="${domElem.id}" `;
+              }
+              description += 'to be restored.';
+              this._resolveBusyStateFocusRestore =
+                busyContext.addBusyState({ description: description });
+            }
+          }
           this._addRemoveOjReadOnlyClassOnLabel(document.getElementById(this.options.labelledBy),
             value);
           break;
@@ -7455,8 +7538,7 @@ PopupMessagingStrategy.prototype._unregisterLauncherEvents = function () {
   jqLauncher[0].removeEventListener('change', this._eatChangeAndClickOnPress, true);
 
   if (isTouchSupported()) {
-    jqLauncher.ojHammer().off('press');
-    jqLauncher.ojHammer('destroy');
+    this.releaseResources();
     jqLauncher.off('contextmenu', this._eatContextMenuOnOpenPopupListener);
     this._eatContextMenuOnOpenPopupListener = null;
     this._inPressEvent = null;
@@ -7473,55 +7555,39 @@ PopupMessagingStrategy.prototype._unregisterLauncherEvents = function () {
 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 (isTouchSupported() && pressEventIndex !== -1) {
+    if (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: [
-          [Press, { time: 750 }]
-        ] };
-      jqLauncher.ojHammer(hammerOptions).on('press', openPopupCallback);
+      this.registerHammerOpenCallbackOnLauncher();
     }
   }
 
@@ -7538,6 +7604,62 @@ PopupMessagingStrategy.prototype._registerLauncherEvents = function () {
   }
 };
 
+  /**
+   * 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 (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: [
+        [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 (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"
@@ -7612,6 +7734,34 @@ PopupMessagingStrategy.prototype._getPopupPosition = function () {
   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_esm/ojjquery-hammer.js

@@ -27,6 +27,7 @@ if (Hammer) {
             hammer.destroy();
             $el.removeData('ojHammer');
           }
+          $el.off('remove.ojHammer');
         });
 
       default:
@@ -34,7 +35,13 @@ if (Hammer) {
         return this.each(function () {
           var $el = $(this);
           if (!$el.data('ojHammer')) {
-            $el.data('ojHammer', new Manager($el[0], options));
+            const mgr = new 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_esm/ojkeyboardfocus-utils.js

@@ -52,13 +52,28 @@ const checkVisibility = function (element) {
   return !(element.offsetHeight === 0 || element.offsetWidth === 0);
 };
 
+/**
+ * @export
+ */
+const getActionableElementsInNode = function (element) {
+  var actionableElems = [];
+  let nodes = element.querySelectorAll(_ACTIONABLE_ELEMENTS_QUERY);
+  for (var i = 0; i < nodes.length; i++) {
+    var elem = nodes[i];
+    if (!elem.disabled && elem.style.display !== 'none') {
+      actionableElems.push(elem);
+    }
+  }
+  return actionableElems;
+};
+
 /**
  * @export
  */
 const isActionableElement = function (node) {
   var parentNode = node.parentNode;
   if (parentNode != null) {
-    var nodes = parentNode.querySelectorAll(_ACTIONABLE_ELEMENTS_QUERY);
+    var nodes = getActionableElementsInNode(parentNode);
     for (var i = 0; i < nodes.length; i++) {
       if (nodes[0] === node) {
         return true;
@@ -208,4 +223,4 @@ const getLogicalChildPopup = function (componentElement) {
   return null;
 };
 
-export { checkVisibility, disableAllFocusableElements, disableElement, enableAllFocusableElements, getFocusableElementsInNode, getLogicalChildPopup, isActionableElement };
+export { checkVisibility, disableAllFocusableElements, disableElement, enableAllFocusableElements, getActionableElementsInNode, getFocusableElementsInNode, getLogicalChildPopup, isActionableElement };

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

@@ -5294,6 +5294,11 @@ const _ojListView = _ListViewUtils.clazz(Object, /** @lends oj._ojListView.proto
         y: event.originalEvent.changedTouches[0].pageY
       };
     }
+
+    // mouse down on input element inside item should trigger actionable mode
+    if (this._isInputElement(target.get(0))) {
+      this._enterActionableMode(item);
+    }
   },
 
   /**
@@ -5352,19 +5357,21 @@ const _ojListView = _ListViewUtils.clazz(Object, /** @lends oj._ojListView.proto
    * Enters actionable mode
    * @private
    */
-  _enterActionableMode: function () {
-    var current = this.m_active.elem;
+  _enterActionableMode: function (item) {
+    var current = (item === undefined) ? this.m_active.elem : item;
 
-    // in case content has been updated under the cover
-    this.disableAllTabbableElements(current);
+    if (current) {
+      // in case content has been updated under the cover
+      this.disableAllTabbableElements(current);
 
-    // re-enable all tabbable elements
-    this._enableAllTabbableElements(current);
+      // re-enable all tabbable elements
+      this._enableAllTabbableElements(current);
 
-    // only go into actionable mode if there is something to focus
-    var first = current.find('[data-first]');
-    if (first.length > 0) {
-      this._setActionableMode(true);
+      // only go into actionable mode if there is something to focus
+      var first = current.find('[data-first]');
+      if (first.length > 0) {
+        this._setActionableMode(true);
+      }
     }
   },
 
@@ -5376,7 +5383,9 @@ const _ojListView = _ListViewUtils.clazz(Object, /** @lends oj._ojListView.proto
     this._setActionableMode(false);
 
     // disable all tabbable elements in the item again
-    this.disableAllTabbableElements(this.m_active.elem);
+    if (this.m_active) {
+      this.disableAllTabbableElements(this.m_active.elem);
+    }
   },
 
   /**
@@ -5417,7 +5426,7 @@ const _ojListView = _ListViewUtils.clazz(Object, /** @lends oj._ojListView.proto
         }
 
         if (this._isActionableMode() && this.m_active != null &&
-          this.m_active.elem.get(0) !== item.get(0)) {
+          this.m_active.elem.get(0) !== item.get(0) && !this._isInputElement(target.get(0))) {
           // click on item other than current focus item should exit actionable mode
           this._exitActionableMode();
         }
@@ -5467,12 +5476,6 @@ const _ojListView = _ListViewUtils.clazz(Object, /** @lends oj._ojListView.proto
           this._fireActionEvent(item.get(0), event);
         }
 
-        // click on input element inside item should trigger actionable mode
-        if (this._isInputElement(target.get(0))) {
-          this._enterActionableMode();
-          return;
-        }
-
         // clicking on header will expand/collapse item
         this._handleHeaderClick(event, target, item);
       }
@@ -7233,7 +7236,8 @@ const _ojListView = _ListViewUtils.clazz(Object, /** @lends oj._ojListView.proto
         }
         current.removeClass('oj-focus-highlight');
       }
-    } else if ((key === ' ' || key === 'Spacebar' || key === this.SPACE_KEY) && this._isSelectionEnabled()) {
+    } else if ((key === ' ' || key === 'Spacebar' || key === this.SPACE_KEY) &&
+      this._isSelectionEnabled() && !this._isInputElement(event.target)) {
       ctrlKey = this._ctrlEquivalent(event);
       shiftKey = event.shiftKey;
       if (shiftKey && !ctrlKey && this.m_selectionFrontier != null &&
@@ -8560,7 +8564,7 @@ const _ojListView = _ListViewUtils.clazz(Object, /** @lends oj._ojListView.proto
     scrollElem[0].addEventListener('scroll', this._scrollListener);
 
     // only do this for high-water mark scrolling, other cases we have (and should not care) no knowledge about the scroller
-    if (this.isLoadMoreOnScroll()) {
+    if (this.isLoadMoreOnScroll() && this._getScroller() !== document.documentElement) {
       this._wheelListener = function (event) {
         // add originalEvent for downstream code expecting it
         if (!event.originalEvent) {

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

@@ -713,7 +713,7 @@ var mergeDeepWithKey$1 = mergeDeepWithKey;
 const combineClassNames = (key, l, r) => key === "class" ? classNames([l, r]) : r;
 const mergeInterpolations = (interpolations) => (props) => interpolations.reduce((acc, fn) => mergeDeepWithKey$1(combineClassNames, acc, fn(props)), {});
 
-/*! *****************************************************************************
+/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any

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

@@ -1155,12 +1155,7 @@ var __oj_radioset_metadata =
         }
 
         // if readonly, set tabindex and aria-readonly on the wrapper
-        if (this.options.readOnly) {
-          let domElem = this.element[0];
-          let wrapperDom = domElem.querySelector('.oj-radioset-wrapper');
-          wrapperDom.setAttribute('tabindex', this._externalTabIndex);
-          wrapperDom.setAttribute('aria-readonly', 'true');
-        }
+        this._updateReadonlyState();
         this._on(this._events);
         this._setup();
       },
@@ -1207,6 +1202,16 @@ var __oj_radioset_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;
+          }
+        }
         // JET-43430 - dynamic form focus issue for radio buttonset
         // When tabbing through, the input element that is currently checked will be focused if
         // one is available. Otherwise the first input element will be given focus. We need to
@@ -1222,6 +1227,18 @@ var __oj_radioset_metadata =
         // If there is no checked inputs, simply return the first enabled input
         return this._GetContentElement().not(':disabled').first()[0];
       },
+      /**
+       * oj-radioset doesn't use .oj-text-field-readonly for the focusable readonly content,
+       * so we need to use a different selector.
+       * @memberof oj.ojRadioset
+       * @instance
+       * @override
+       * @protected
+       * @return {Element|null}
+       */
+      _GetReadonlyFocusElement: function () {
+        return this.widget()[0].querySelector('.oj-form-control-container');
+      },
       /**
        * Whether the component is required.
        *
@@ -1859,6 +1876,45 @@ var __oj_radioset_metadata =
 
         this.$radios._ojRadioCheckbox('refreshDisabled');
       },
+
+      /**
+       * Updates the component's state based on whether or not it is in the readonly
+       * state.
+       * @private
+       * @memberof! oj.ojRadioset
+       */
+      _updateReadonlyState: function () {
+        const wrapperDom = this.element[0].querySelector('.oj-radioset-wrapper');
+        if (this.options.readOnly) {
+          wrapperDom.setAttribute('tabindex', this._externalTabIndex);
+          wrapperDom.setAttribute('aria-readonly', 'true');
+          this.element.addClass('oj-read-only');
+
+          // JET-49107 - reassess accessibility implementation of 'readonly' radioset
+          // In readonly mode, we will not have any radio 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');
+        wrapperDom.removeAttribute('aria-readonly');
+        this.element.removeClass('oj-read-only');
+
+        // JET-49107 - reassess accessibility implementation of 'readonly' radioset
+        // add back the role and aria attributes removed before
+        this.element.attr('role', 'radiogroup');
+        this._labelledByUpdatedForSet(
+          this.widget()[0].id,
+          null,
+          this.options.labelledBy,
+          this.widget()
+        );
+      },
+
       /**
        * Note that _setOption does not get called during create in the super class.
        * It only gets called when the component has already been created.
@@ -1875,18 +1931,8 @@ var __oj_radioset_metadata =
             this._propagateDisabled(value);
             break;
           case 'readOnly':
-            var wrapperDom = this.element[0].querySelector('.oj-radioset-wrapper');
             var val = this.options.value;
-            if (value) {
-              wrapperDom.setAttribute('tabindex', this._externalTabIndex);
-              wrapperDom.setAttribute('aria-readonly', 'true');
-              this.element.addClass('oj-read-only');
-            } else {
-              // remove tabindex and role
-              wrapperDom.removeAttribute('tabindex');
-              wrapperDom.removeAttribute('aria-readonly');
-              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/ojrowexpander.js

@@ -2726,11 +2726,12 @@ oj.__registerWidget('oj.ojRowExpander', $.oj.baseComponent,
      * @private
      * @memberof oj.ojRowExpander
      */
-    _releaseResources: function () {
+     _releaseResources: function () {
       this.component.element[0].removeEventListener('keydown', this.handleKeyDownCallback, true);
-      this.toucharea.removeEventListener('touchend', this._touchEndListener);
-      this.toucharea.removeEventListener('click', this._clickListener);
-      this.element[0].removeEventListener('keypress', this._keyPressListener);
+      this.toucharea.removeEventListener('touchend', this.handleTouchEndCallback);
+      this.toucharea.removeEventListener('click', this.handleClickCallback);
+      this.element[0].removeEventListener('keypress', this.handleKeyPressCallback);
+
 
       if (this.component._IsCustomElement()) {
         $(this.component.element).off('ojBeforeCurrentCell', this.handleActiveKeyChangeCallback);
@@ -2770,7 +2771,7 @@ oj.__registerWidget('oj.ojRowExpander', $.oj.baseComponent,
     * @memberof oj.ojRowExpander
     * @private
     */
-    _setupResources: function () {
+     _setupResources: function () {
       if (!this._subscribed && this._isDataProvider()) {
         this._subscribeToDataProvider();
         this._subscribed = true;
@@ -2779,9 +2780,14 @@ oj.__registerWidget('oj.ojRowExpander', $.oj.baseComponent,
       this.handleKeyDownCallback = this._handleKeyDownEvent.bind(this);
       this.component.element[0].addEventListener('keydown', this.handleKeyDownCallback, true);
       if (this.iconState === 'expanded' || this.iconState === 'collapsed') {
-        this.toucharea.addEventListener('touchend', this._touchEndListener.bind(this));
-        this.toucharea.addEventListener('click', this._clickListener.bind(this));
-        this.element[0].addEventListener('keypress', this._keyPressListener.bind(this));
+        this.handleTouchEndCallback = this._touchEndListener.bind(this);
+        this.toucharea.addEventListener('touchend', this.handleTouchEndCallback);
+
+        this.handleClickCallback = this._clickListener.bind(this);
+        this.toucharea.addEventListener('click', this.handleClickCallback);
+
+        this.handleKeyPressCallback = this._keyPressListener.bind(this);
+        this.element[0].addEventListener('keypress', this.handleKeyPressCallback);
 
         // listens for expand and collapse event from flattened datasource
         // this could be due to user clicks, keyboard shortcuts or programmatically