FDS-669 FLOW-1795 f-select options opening side logic updated (#272)

ollionorg · May 17, 2024 · 3b94874 · 3b94874
1 parent 2b1ea4e
commit 3b94874
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 5 deletions.
diff --git a/packages/flow-core/CHANGELOG.md b/packages/flow-core/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 # Change Log
 
+## [2.9.11] - 2024-05-17
+
+### Bug Fixes
+
+- `f-select` open on left side when rendered on extreme right of the window.
+
 ## [2.9.10] - 2024-04-15
 
 ### Bug Fixes

diff --git a/packages/flow-core/package.json b/packages/flow-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ollion/flow-core",
-  "version": "2.9.10",
+  "version": "2.9.11",
   "description": "Core package of flow design system",
   "module": "dist/flow-core.es.js",
   "main": "dist/flow-core.cjs.js",

diff --git a/packages/flow-core/src/components/f-select/f-select.ts b/packages/flow-core/src/components/f-select/f-select.ts
@@ -344,7 +344,17 @@ export class FSelect extends FRoot {
 	 * apply styling to f-select options wrapper.
 	 */
 	applyOptionsStyle(width: number) {
-		const commonStyle = `transition: max-height var(--transition-time-rapid) ease-in 0s;`;
+		let right = ``;
+		if (this.wrapperElement) {
+			const spaceOnRight =
+				document.body.offsetWidth - this.wrapperElement.getBoundingClientRect().right;
+
+			if (spaceOnRight < this.wrapperElement.offsetWidth) {
+				right = `right:${spaceOnRight}px;`;
+			}
+		}
+
+		const commonStyle = `transition: max-height var(--transition-time-rapid) ease-in 0s;${right}`;
 
 		const maxWidth = `max-width:${this.maxOptionsWidth ?? `${width}px`};`;
 

diff --git a/packages/flow-table/CHANGELOG.md b/packages/flow-table/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 # Change Log
 
+## [2.4.4] - 2024-05-17
+
+### Bug Fixes
+
+- Searchbar dropdown not opening.
+
 ## [2.4.3] - 2024-05-03
 
 ### Improvements

diff --git a/packages/flow-table/package.json b/packages/flow-table/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ollion/flow-table",
-  "version": "2.4.3",
+  "version": "2.4.4",
   "description": "Table component for flow library",
   "module": "dist/flow-table.es.js",
   "main": "dist/flow-table.cjs.js",

diff --git a/packages/flow-table/src/components/f-table-schema/f-table-schema.ts b/packages/flow-table/src/components/f-table-schema/f-table-schema.ts
@@ -441,7 +441,7 @@ export class FTableSchema extends FRoot {
 				${this.showSearchBar
 					? html`<f-div
 							padding="medium none"
-							style="position: sticky;left: 0px;"
+							style="position: sticky;left: 0px;z-index:3;"
 							.width=${this.offsetWidth + "px"}
 					  >
 							<f-search

diff --git a/stories/flow-table/f-table-schema.stories.ts b/stories/flow-table/f-table-schema.stories.ts
@@ -176,7 +176,7 @@ export const Playground = {
 		["highlight-column-hover"]: true,
 		["sticky-header"]: true,
 		["rows-per-page"]: 20,
-		data: getFakeUsers(100),
+		data: getFakeUsers(60),
 		["sort-by"]: "firstName",
 		["sort-order"]: "asc",
 		["search-term"]: "",