Merge pull request #1013 from OutSystems/ROU-11549

ROU-11549: DropdownServerSide - Fix a position issue when inside BottomSheet.
OutSystems · Jan 30, 2025 · 9803307 · 9803307
2 parents 5b999ba + c3df19a
commit 9803307
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 0 deletions.
diff --git a/src/scripts/OSFramework/OSUI/Pattern/Dropdown/ServerSide/DropdownServerSide.ts b/src/scripts/OSFramework/OSUI/Pattern/Dropdown/ServerSide/DropdownServerSide.ts
@@ -112,6 +112,24 @@ namespace OSFramework.OSUI.Patterns.Dropdown.ServerSide {
 			);
 		}
 
+		// Method to move Balloon Options Wrapper to outside of the pattern context
+		private _moveBalloonOptionsWrapper(): void {
+			/* NOTE:
+				- When inside BottomSheet the BalloonOptionsWrapper should be moved to the content wrapper
+				due to position issues related with fixed position of the balloon against BottomSheet fixed position.
+				More info at Release Note: ROU-11549
+			 */
+			// Ensure DropdownServerSide is inside at BottomSheet
+			if (Helper.DeviceInfo.IsPhone && this.selfElement.closest(Enum.InsidePattern.BottomSheet)) {
+				// Get the content element where to move the BalloonOptionsWrapper
+				const contentElem = Helper.Dom.ClassSelector(document, GlobalEnum.CssClassElements.Content);
+				// Move the DropdownServerSide ballon element to the content element
+				Helper.Dom.Move(this._balloonElem, contentElem);
+				// Add a custom css selector in order to style it at this new context
+				OSFramework.OSUI.Helper.Dom.Styles.AddClass(this._balloonElem, Enum.CssClass.HasBeenMovedToContent);
+			}
+		}
+
 		// Close when click outside of pattern
 		private _onBodyClick(eventName: string, event: PointerEvent): void {
 			if (this._isOpen === false) {
@@ -349,6 +367,9 @@ namespace OSFramework.OSUI.Patterns.Dropdown.ServerSide {
 				this._balloonElem,
 				this.balloonOptions
 			);
+
+			// Call the method to move the Balloon Options Wrapper
+			OSFramework.OSUI.Helper.AsyncInvocation(this._moveBalloonOptionsWrapper.bind(this));
 		}
 
 		// Method used to add CSS classes to pattern elements

diff --git a/src/scripts/OSFramework/OSUI/Pattern/Dropdown/ServerSide/DropdownServerSideEnum.ts b/src/scripts/OSFramework/OSUI/Pattern/Dropdown/ServerSide/DropdownServerSideEnum.ts
@@ -22,6 +22,7 @@ namespace OSFramework.OSUI.Patterns.Dropdown.ServerSide.Enum {
 		BalloonSearch = 'osui-dropdown-serverside__balloon-search',
 		BalloonSearchIcon = 'osui-dropdown-serverside__balloon-search-icon',
 		ErrorMessage = 'osui-dropdown-serverside-error-message',
+		HasBeenMovedToContent = 'osui-dropdown-serverside--at-content',
 		IsDisabled = 'osui-dropdown-serverside--is-disabled',
 		IsOpened = 'osui-dropdown-serverside--is-opened',
 		IsVisible = 'osui-dropdown-serverside-visible',
@@ -51,6 +52,13 @@ namespace OSFramework.OSUI.Patterns.Dropdown.ServerSide.Enum {
 		Width = '--osui-dropdown-ss-width',
 	}
 
+	/**
+	 * All elements where Dropdown can be added into and changes must be done
+	 */
+	export enum InsidePattern {
+		BottomSheet = '.osui-bottom-sheet',
+	}
+
 	/**
 	 * Enum properties
 	 */

diff --git a/src/scripts/OSFramework/OSUI/Pattern/Dropdown/ServerSide/scss/_dropdown-serverside.scss b/src/scripts/OSFramework/OSUI/Pattern/Dropdown/ServerSide/scss/_dropdown-serverside.scss
@@ -437,6 +437,16 @@ $balloonMobileTopMargin: 5vh;
 		}
 	}
 
+	&.portrait {
+		.osui-dropdown-serverside {
+			&--at-content {
+				.osui-dropdown-serverside__balloon-container {
+					--ballon-top-margin-value: calc(var(--header-size) + var(--header-size-content) + 5vw);
+				}
+			}
+		}
+	}
+
 	&.landscape {
 		.osui-dropdown-serverside {
 			// Balloon section
@@ -453,6 +463,12 @@ $balloonMobileTopMargin: 5vh;
 					}
 				}
 			}
+
+			&--at-content {
+				.osui-dropdown-serverside__balloon-container {
+					--ballon-top-margin-value: 10px;
+				}
+			}
 		}
 	}
 
@@ -524,5 +540,51 @@ $balloonMobileTopMargin: 5vh;
 				opacity: 1;
 			}
 		}
+
+		// When moved to content container context
+		&--at-content {
+			align-items: flex-start;
+			justify-content: center;
+			max-height: 0;
+
+			&.osui-dropdown-serverside--is-opened {
+				max-height: 60vh;
+
+				.osui-dropdown-serverside__balloon-container {
+					transform: translateY(0);
+				}
+			}
+
+			.osui-dropdown-serverside__balloon-container {
+				margin-top: var(--ballon-top-margin-value);
+				position: relative;
+				transform: translateY(calc(0.5 * var(--ballon-top-margin-value)));
+				transition: all 0.25s ease;
+			}
+
+			.osui-dropdown-serverside__balloon-content {
+				max-height: calc(100vh - (2 * var(--ballon-top-margin-value)));
+
+				/* width */
+				&::-webkit-scrollbar {
+					width: 3px;
+				}
+
+				/* Track */
+				&::-webkit-scrollbar-track {
+					background-color: var(--color-neutral-3);
+				}
+
+				/* Handle */
+				&::-webkit-scrollbar-thumb {
+					background-color: var(--color-neutral-6);
+				}
+
+				/* Handle on hover */
+				&::-webkit-scrollbar-thumb:hover {
+					background-color: var(--color-neutral-8);
+				}
+			}
+		}
 	}
 }