Merge pull request #135 from supertokens/fix/scroll-isues

fix: scroll issues on window and in some browsers versions

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [unreleased]
 
+## [0.10.3] - 2024-01-26
+
+-   Fixes scroll issues on diffrent browsers.
+
 ## [0.10.2] - 2024-01-26
 
 -   Fix typo on user roles section on user details page.

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "dashboard",
-	"version": "0.10.2",
+	"version": "0.10.3",
 	"private": true,
 	"dependencies": {
 		"@babel/core": "^7.16.0",

src/ui/components/select/index.tsx

@@ -1,6 +1,3 @@
-import { useState } from "react";
-import { ReactComponent as ArrowDown } from "../../../assets/arrow-down.svg";
-
 import "./select.scss";
 
 type SelectProps = {
@@ -9,42 +6,30 @@ type SelectProps = {
 	onOptionSelect: (value: string) => void;
 };
 export default function Select({ onOptionSelect, options, selectedOption }: SelectProps) {
-	const [showOptions, setShowOptions] = useState(false);
+	function handleChange(e: React.ChangeEvent<HTMLSelectElement>) {
+		const selectedOption = options.find((option) => option.value === e.currentTarget.value)!;
+		onOptionSelect(selectedOption.value);
+	}
 	return (
-		<div
-			className="select-container"
-			onMouseLeave={() => setShowOptions(false)}
-			onMouseEnter={() => setShowOptions(true)}
-			//	this code make sure that the select options show up in the mobile view
-			//	since there will be no onMouseEnter event there.
-			onClick={() => setShowOptions(true)}>
-			<div className="select-action">
-				{selectedOption === undefined ? "Please select" : selectedOption}{" "}
-				<ArrowDown
-					color="#000"
-					style={{ rotate: showOptions ? "180deg" : undefined }}
-				/>
-			</div>
-			{showOptions ? (
-				<div className="select-dropdown-wrapper">
-					<div className="select-dropdown">
-						{options.map((option) => {
-							return (
-								<div
-									className="select-item"
-									key={option.value}
-									onClick={(e) => {
-										e.stopPropagation();
-										onOptionSelect(option.value);
-										setShowOptions(false);
-									}}>
-									{option.name}
-								</div>
-							);
-						})}
-					</div>
-				</div>
-			) : null}
-		</div>
+		<select
+			className="st-select"
+			onChange={handleChange}>
+			<option
+				disabled
+				selected={selectedOption === undefined}>
+				Please select
+			</option>
+			{options.map((option) => {
+				const isSelected = option.value === selectedOption;
+				return (
+					<option
+						selected={isSelected}
+						value={option.value}
+						key={option.value}>
+						{option.name}
+					</option>
+				);
+			})}
+		</select>
 	);
 }

src/ui/components/select/select.scss

@@ -1,56 +1,17 @@
-.select-container {
-	position: relative;
-	cursor: pointer;
+.st-select {
+	outline: none;
 
-	.select-action {
-		display: flex;
-		width: 210px;
-		height: 36px;
-		padding: 9px 13px;
-		justify-content: space-between;
-		align-items: center;
-		gap: 10px;
-		flex-shrink: 0;
+	width: 210px;
+	height: 36px;
+	padding: 9px 13px;
 
-		border-radius: 6px;
-		border: 1px solid #e5e5e5;
-		background: #fff;
+	border-radius: 6px;
+	border: 1px solid #e5e5e5;
+	background: #fff;
 
-		color: #222;
-		font-size: 14px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: normal;
-	}
-	.select-dropdown-wrapper {
-		padding-top: 5px;
-		top: 36px;
-		z-index: 5;
-		position: absolute;
-		width: 100%;
-		max-height: 150px;
-		overflow: scroll;
-		box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.16);
-
-		.select-dropdown {
-			background: #fff;
-			border-radius: 6px;
-			background: #fff;
-
-			.select-item {
-				cursor: pointer;
-				padding: 12px;
-				color: #222;
-				font-size: 14px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: normal;
-
-				&:hover {
-					background: #f0f0f0;
-					width: 100%;
-				}
-			}
-		}
-	}
+	color: #222;
+	font-size: 14px;
+	font-style: normal;
+	font-weight: 400;
+	line-height: normal;
 }

src/ui/styles/index.css

@@ -60,3 +60,18 @@ button:disabled {
 	opacity: 0.5;
 	pointer-events: none;
 }
+
+/* Styling the scrollbar in Chrome and Safari */
+::-webkit-scrollbar {
+	width: 6px;
+	height: 6px;
+}
+
+::-webkit-scrollbar-thumb {
+	background-color: #8d8d8d; /* Set thumb color for Chrome and Safari */
+	border-radius: 10px;
+}
+
+::-webkit-scrollbar-track {
+	background-color: transparent; /* Set track color for Chrome and Safari */
+}

src/version.ts

@@ -13,4 +13,4 @@
  * under the License.
  */
 
-export const package_version = "0.10.2";
+export const package_version = "0.10.3";