Use convert select element to an input-dropdown

supertokens · Jul 14, 2024 · d274eb2 · d274eb2
1 parent a500b36
commit d274eb2
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 13 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,7 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [0.12.0]
 
--   Adds Multitenancy support to the dashboard
+-   Adds Multi-tenancy support to the dashboard
 
 ## [0.11.2] - 2024-05-23
 

diff --git a/src/ui/components/inputField/InputDropdown.tsx b/src/ui/components/inputField/InputDropdown.tsx
@@ -12,7 +12,7 @@
  * License for the specific language governing permissions and limitations
  * under the License.
  */
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useRef, useState } from "react";
 import { getImageUrl } from "../../../utils";
 import TooltipContainer from "../tooltip/tooltip";
 
@@ -48,6 +48,8 @@ const InputDropdown: React.FC<InputDropdownPropTypes> = (props) => {
 	const [isFocused, setIsFocused] = useState<boolean>(false);
 	const [isTouched, setIsTouched] = useState(false);
 
+	const inputRef = useRef<HTMLInputElement>(null);
+
 	const onChange = useCallback(
 		(
 			event:
@@ -64,7 +66,13 @@ const InputDropdown: React.FC<InputDropdownPropTypes> = (props) => {
 	const showError = props.error && (isTouched || props.forceShowError);
 
 	return (
-		<div className="input-field-container">
+		<div
+			className="input-field-container"
+			onBlur={() => {
+				setTimeout(() => {
+					setIsFocused(false);
+				}, 100);
+			}}>
 			{props.label && (
 				<label
 					htmlFor={props.name}
@@ -86,26 +94,44 @@ const InputDropdown: React.FC<InputDropdownPropTypes> = (props) => {
 						{props.prefix}
 					</div>
 				)}
-				<select
+				<input
 					name={props.name}
 					id={props.name + "-text"}
 					onChange={onChange}
 					value={props.value}
 					autoFocus={props.autofocus}
 					onFocus={() => setIsFocused(true)}
-					onBlur={() => setIsFocused(false)}
-					className={`text-small text-black input-field ${showError ? "input-field-error-state" : ""} ${
-						props.size === "small" ? "input-field-small" : ""
-					}`}>
+					onBlur={() => {
+						setTimeout(() => setIsFocused(false), 100);
+					}}
+					className={`input-dropdown text-small text-black input-field ${
+						showError ? "input-field-error-state" : ""
+					} ${props.size === "small" ? "input-field-small" : ""}`}
+					type="text"
+					ref={inputRef}
+				/>
+			</div>
+			{isFocused && (
+				<div className="input-dropdown-options">
 					{props.options.map((option, index) => (
-						<option
+						<div
 							key={index}
-							value={option}>
+							className="input-dropdown-option"
+							onClick={() => {
+								if (inputRef.current) {
+									const syntheticChangeEvent = new Event("change", { bubbles: true });
+									Object.defineProperty(syntheticChangeEvent, "target", {
+										value: { value: option, name: props.name },
+										writable: true,
+									});
+									onChange(syntheticChangeEvent as unknown as React.ChangeEvent<HTMLInputElement>);
+								}
+							}}>
 							{option}
-						</option>
+						</div>
 					))}
-				</select>
-			</div>
+				</div>
+			)}
 			{showError && errorPlacement === "bottom" && (
 				<div className="input-field-error block-small block-error">
 					<img

diff --git a/src/ui/components/inputField/InputField.css b/src/ui/components/inputField/InputField.css
@@ -130,3 +130,26 @@ textarea.input-field {
 	top: 20%;
 	left: -24px;
 }
+
+.input-dropdown-options {
+	position: absolute;
+	width: fit-content;
+	display: flex;
+	flex-direction: column;
+	top: 44px;
+	left: 0;
+	z-index: 1000;
+	border-radius: 6px;
+	border: none;
+	outline: none;
+	background-color: white;
+	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+.input-dropdown-option {
+	padding: 12px 15px 12px;
+	cursor: pointer;
+	font-size: 13px;
+}
+.input-dropdown-option:hover {
+	background-color: var(--color-input-field-prefix-bg);
+}