ROU-4553: Fixed BodyOnScroll global event

src/scripts/OSFramework/OSUI/Event/DOMEvents/Listeners/ListenerEnum.ts

@@ -6,9 +6,9 @@ namespace OSFramework.OSUI.Event.DOMEvents.Listeners {
 	export enum Type {
 		BalloonOnToggle = 'balloon.onToggle',
 		BodyOnClick = 'body.onclick',
-		BodyOnScroll = 'body.onscroll',
 		BodyOnMouseDown = 'body.mousedown',
 		OrientationChange = 'window.onorientationchange',
+		ScreenOnScroll = 'screen.onscroll',
 		WindowResize = 'window.onresize',
 	}
 }

src/scripts/OSFramework/OSUI/Event/DOMEvents/Listeners/ListenerManager.ts

@@ -14,14 +14,14 @@ namespace OSFramework.OSUI.Event.DOMEvents.Listeners {
 					return new BalloonOnToggle();
 				case Type.BodyOnClick:
 					return new BodyOnClick();
-				case Type.BodyOnScroll:
-					return new BodyOnScroll();
 				case Type.BodyOnMouseDown:
 					return new BodyOnMouseDown();
 				case Type.WindowResize:
 					return new WindowResize();
 				case Type.OrientationChange:
 					return new OrientationChange();
+				case Type.ScreenOnScroll:
+					return new ScreenOnScroll();
 				default:
 					throw new Error(`The listener ${listenerType} is not supported.`);
 			}

src/scripts/OSFramework/OSUI/Event/DOMEvents/Listeners/ScreenOnScroll.ts

@@ -0,0 +1,21 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+namespace OSFramework.OSUI.Event.DOMEvents.Listeners {
+	/**
+	 * Class that represents the scroll on the active screen element.
+	 *
+	 * @export
+	 * @class ScreenOnScroll
+	 * @extends {Event.AbstractEvent<string>}
+	 */
+	export class ScreenOnScroll extends AbstractListener<string> {
+		constructor() {
+			super( Helper.Dom.ClassSelector(document, GlobalEnum.CssClassElements.ActiveScreen), GlobalEnum.HTMLEvent.Scroll);
+			this.eventCallback = this._screenTrigger.bind(this);
+		}
+
+		// Method to act as callback for the added event and trigger all handlers stored
+		private _screenTrigger(evt: Event): void {
+			this.trigger(GlobalEnum.HTMLEvent.Scroll, evt);
+		}
+	}
+}

src/scripts/OSFramework/OSUI/Pattern/Dropdown/ServerSide/DropdownServerSide.ts

@@ -34,15 +34,15 @@ namespace OSFramework.OSUI.Patterns.Dropdown.ServerSide {
 		private _closeDynamically = false;
 		// Click On Body
 		private _eventOnBodyClick: GlobalCallbacks.Generic;
-		// Event OnBodyScroll
-		private _eventOnBodyScroll: GlobalCallbacks.Generic;
 		// Click Event
 		private _eventOnClick: GlobalCallbacks.Generic;
 		private _eventOnClickInputSearch: GlobalCallbacks.Generic;
 		// Event OnTransitionEnd applied to the Balloon
 		private _eventOnCloseTransitionEnd: GlobalCallbacks.Generic;
 		// Event OnOrientationChange Event
 		private _eventOnOrientationChange: GlobalCallbacks.Generic;
+		// Event OnScreenScroll
+		private _eventOnScreenScroll: GlobalCallbacks.Generic;
 		// OnSearchInputBlur Event
 		private _eventOnSearchInputBlur: GlobalCallbacks.Generic;
 		// OnSearchInputFocus Event
@@ -67,8 +67,6 @@ namespace OSFramework.OSUI.Patterns.Dropdown.ServerSide {
 		private _isOpen = false;
 		// Platform OnClose Callback
 		private _platformEventOnToggleCallback: GlobalCallbacks.OSGeneric;
-		// Store the RequestAnimationFrame that will be triggered at OnBodyScroll
-		private _requestAnimationOnBodyScroll: number;
 		// Store the HTML element for the Dropdown Select Wrapper
 		private _selectValuesWrapper: HTMLElement;
 		// Store the SelectValuesWrapper AriaLabel text
@@ -118,8 +116,6 @@ namespace OSFramework.OSUI.Patterns.Dropdown.ServerSide {
 			// Update the touchMove when pattern is open!
 			this._touchMove();
 
-			// Cancel the requestAnimationFrame
-			cancelAnimationFrame(this._requestAnimationOnBodyScroll);
 			// Update status property
 			this._isOpen = false;
 			// Update pattern status!
@@ -234,38 +230,6 @@ namespace OSFramework.OSUI.Patterns.Dropdown.ServerSide {
 			}
 		}
 
-		// Update the balloon coordinates
-		private _onBodyScroll(_eventType: string, event: UIEvent): void {
-			if (this.isBuilt) {
-				// If the scroll occcurs inside balloonContent, stop all the forward logic!
-				if (event !== undefined && event.target === this._balloonContentElement) {
-					cancelAnimationFrame(this._requestAnimationOnBodyScroll);
-					return;
-				}
-
-				// If it's open and not at Desktop
-				if (this._isOpen && Helper.DeviceInfo.IsDesktop === false) {
-					cancelAnimationFrame(this._requestAnimationOnBodyScroll);
-
-					// If it's tablet close it in order to prevent flickering on updating it's position!
-					if (Helper.DeviceInfo.IsTablet) {
-						this._close();
-					}
-					return;
-				}
-
-				// If the balloon is open and not IsPhone
-				if (this._isOpen) {
-					// Update the coordinates
-					this._setBalloonCoordinates(false);
-					// Update the "animation" before the next repaint
-					this._requestAnimationOnBodyScroll = requestAnimationFrame(this._eventOnBodyScroll);
-				} else {
-					cancelAnimationFrame(this._requestAnimationOnBodyScroll);
-				}
-			}
-		}
-
 		// A11y keyboard keys
 		private _onKeyboardPressed(event: KeyboardEvent): void {
 			event.stopPropagation();
@@ -331,6 +295,21 @@ namespace OSFramework.OSUI.Patterns.Dropdown.ServerSide {
 			}
 		}
 
+		// Update the balloon coordinates
+		private _onScreenScroll(): void {
+			if (this.isBuilt && this._isOpen) {
+				// If it's tablet close it in order to prevent flickering on updating it's position!
+				if (Helper.DeviceInfo.IsTablet) {
+					this._close();
+					return;
+				}
+
+				// If the balloon is open and Desktop
+				// Update the coordinates
+				requestAnimationFrame(this._setBalloonCoordinates.bind(this));
+			}
+		}
+
 		// Also Used to manage the balloon height accordingly keyboard is in use due to the way iOS deal with it!
 		private _onSearchInputBlur(): void {
 			Helper.Dom.Styles.RemoveClass(this._balloonWrapperElement, Enum.CssClass.SearchInputIsFocused);
@@ -521,10 +500,7 @@ namespace OSFramework.OSUI.Patterns.Dropdown.ServerSide {
 					selfElement.right ===
 						this._selfElementBoundingClientRect.x + this._selfElementBoundingClientRect.width &&
 					selfElement.y === this._selfElementBoundingClientRect.y)
-			) {
-				cancelAnimationFrame(this._requestAnimationOnBodyScroll);
-				return;
-			}
+			)
 
 			// Store the new selElement coordinates
 			this._selfElementBoundingClientRect.x = selfElement.x;
@@ -667,15 +643,15 @@ namespace OSFramework.OSUI.Patterns.Dropdown.ServerSide {
 					Event.DOMEvents.Listeners.Type.BodyOnClick,
 					this._eventOnBodyClick
 				);
+
+				if(Helper.DeviceInfo.IsPhone === false) {
+					// Add the ScreenScroll callback that will be used to update the balloon coodinates
+					Event.DOMEvents.Listeners.GlobalListenerManager.Instance.addHandler(
+						Event.DOMEvents.Listeners.Type.ScreenOnScroll,
+						this._eventOnScreenScroll
+					);
+				}
 
-				// Add the BodyScroll callback that will be used to update the balloon coodinates
-				Event.DOMEvents.Listeners.GlobalListenerManager.Instance.addHandler(
-					Event.DOMEvents.Listeners.Type.BodyOnScroll,
-					this._eventOnBodyScroll
-				);
-
-				// Update "animation" before the next repaint
-				this._requestAnimationOnBodyScroll = requestAnimationFrame(this._eventOnBodyScroll);
 				// Add the window resize callback that will be used to update the balloon position!
 				Event.DOMEvents.Listeners.GlobalListenerManager.Instance.addHandler(
 					Event.DOMEvents.Listeners.Type.WindowResize,
@@ -747,10 +723,14 @@ namespace OSFramework.OSUI.Patterns.Dropdown.ServerSide {
 				Event.DOMEvents.Listeners.Type.BodyOnClick,
 				this._eventOnBodyClick
 			);
-			Event.DOMEvents.Listeners.GlobalListenerManager.Instance.removeHandler(
-				Event.DOMEvents.Listeners.Type.BodyOnScroll,
-				this._eventOnBodyScroll
-			);
+
+			if(Helper.DeviceInfo.IsPhone === false) {
+				Event.DOMEvents.Listeners.GlobalListenerManager.Instance.removeHandler(
+					Event.DOMEvents.Listeners.Type.ScreenOnScroll,
+					this._eventOnScreenScroll
+				);
+			}
+
 			Event.DOMEvents.Listeners.GlobalListenerManager.Instance.removeHandler(
 				Event.DOMEvents.Listeners.Type.WindowResize,
 				this._eventOnWindowResize
@@ -927,7 +907,7 @@ namespace OSFramework.OSUI.Patterns.Dropdown.ServerSide {
 		 */
 		protected setCallbacks(): void {
 			this._eventOnBodyClick = this._onBodyClick.bind(this);
-			this._eventOnBodyScroll = this._onBodyScroll.bind(this);
+			this._eventOnScreenScroll = this._onScreenScroll.bind(this);
 			this._eventOnClick = this._onSelectValuesWrapperClicked.bind(this);
 			this._eventOnClickInputSearch = this._onSearchInputClicked.bind(this);
 			this._eventOnCloseTransitionEnd = this._endOfCloseAnimation.bind(this);
@@ -995,7 +975,7 @@ namespace OSFramework.OSUI.Patterns.Dropdown.ServerSide {
 		 */
 		protected unsetCallbacks(): void {
 			this._eventOnBodyClick = undefined;
-			this._eventOnBodyScroll = undefined;
+			this._eventOnScreenScroll = undefined;
 			this._eventOnClick = undefined;
 			this._eventOnClickInputSearch = undefined;
 			this._eventOnCloseTransitionEnd = undefined;