Fix pickers inside Sidebar not following scroll (#926)

src/scripts/Providers/OSUI/SharedProviderResources/Flatpickr/UpdatePositionOnScroll.ts

@@ -4,7 +4,9 @@ namespace Providers.OSUI.SharedProviderResources.Flatpickr {
 		// Indicates wether the picker is a time picker or other type of picker (Month, Date, DateTime).
 		private _isTimePicker: boolean;
 		// Event OnScreenScroll
-		private _onScreenScrollEvent: OSFramework.OSUI.GlobalCallbacks.Generic;
+		private _onScrollEvent: OSFramework.OSUI.GlobalCallbacks.Generic;
+		// Store the parent Sidebar instance if any
+		private _parentSidebar: HTMLElement;
 		// Store the picker instance
 		private _picker:
 			| Datepicker.Flatpickr.IFlatpickr
@@ -23,6 +25,10 @@ namespace Providers.OSUI.SharedProviderResources.Flatpickr {
 			this._picker = picker;
 			// Set if the picker is a time picker
 			this._isTimePicker = this._picker instanceof TimePicker.Flatpickr.OSUIFlatpickrTime;
+			// Set parent Sidebar
+			this._parentSidebar = picker.selfElement.closest(
+				`${OSFramework.OSUI.Constants.Dot}${OSFramework.OSUI.Patterns.Sidebar.Enum.CssClass.Content}`
+			);
 			// Set onBodyScrollEvent callback
 			this._setCallbacks();
 			// Set the Events
@@ -69,7 +75,7 @@ namespace Providers.OSUI.SharedProviderResources.Flatpickr {
 						// trigger provider update position method
 						this._picker.provider._positionCalendar();
 						// Update the "position" before the next "repaint"
-						this._requestAnimationOnBodyScroll = requestAnimationFrame(this._onScreenScrollEvent);
+						this._requestAnimationOnBodyScroll = requestAnimationFrame(this._onScrollEvent);
 					} else if (this._requestAnimationOnBodyScroll !== undefined) {
 						cancelAnimationFrame(this._requestAnimationOnBodyScroll);
 					}
@@ -79,28 +85,32 @@ namespace Providers.OSUI.SharedProviderResources.Flatpickr {
 
 		// Method used to set callbacks
 		private _setCallbacks(): void {
-			this._onScreenScrollEvent = this._onScreenScroll.bind(this);
+			this._onScrollEvent = this._onScreenScroll.bind(this);
 		}
 
 		// Add Events
 		private _setUpEvents(): void {
-			// Add the BodyScroll callback that will be used to update the balloon coodinates
+			// Add the BodyScroll callback that will be used to update the balloon coordinates
 			OSFramework.OSUI.Event.DOMEvents.Listeners.GlobalListenerManager.Instance.addHandler(
 				OSFramework.OSUI.Event.DOMEvents.Listeners.Type.ScreenOnScroll,
-				this._onScreenScrollEvent
+				this._onScrollEvent
 			);
+			// If the picker is inside a Sidebar, let's add the method to the Sidebar content as well.
+			if (this._parentSidebar) {
+				this._parentSidebar.addEventListener(OSFramework.OSUI.GlobalEnum.HTMLEvent.Scroll, this._onScrollEvent);
+			}
 		}
 
 		// Method used to unset callbacks
 		private _unsetCallbacks(): void {
-			this._onScreenScrollEvent = undefined;
+			this._onScrollEvent = undefined;
 		}
 
 		// Remove Added Events
 		private _unsetEvents(): void {
 			OSFramework.OSUI.Event.DOMEvents.Listeners.GlobalListenerManager.Instance.removeHandler(
 				OSFramework.OSUI.Event.DOMEvents.Listeners.Type.ScreenOnScroll,
-				this._onScreenScrollEvent
+				this._onScrollEvent
 			);
 		}
 
@@ -113,7 +123,7 @@ namespace Providers.OSUI.SharedProviderResources.Flatpickr {
 			this._unsetEvents();
 			this._unsetCallbacks();
 
-			this._onScreenScrollEvent = undefined;
+			this._onScrollEvent = undefined;
 			this._requestAnimationOnBodyScroll = undefined;
 		}
 	}