fix: Convert 'select" element to 'input' element (#148)

* fix overflowing text

* Use convert select element to an input-dropdown

* Use 100% width for dropdown options

* revert changelog changes

Author: ohansFavour

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), 200);
+					}}
+					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

src/ui/components/inputField/InputField.css

@@ -130,3 +130,26 @@ textarea.input-field {
 	top: 20%;
 	left: -24px;
 }
+
+.input-dropdown-options {
+	position: absolute;
+	width: 100%;
+	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);
+}

src/ui/components/userDetail/userDetailForm.scss

@@ -42,6 +42,9 @@
 		span {
 			color: #ed344e;
 			font-weight: bold;
+			word-break: break-all;
+			hyphens: auto;
+			overflow-wrap: anywhere;
 		}
 	}
 }