Add keyboard scroll to inputs

web/components/atoms/DatePicker.tsx

@@ -1,6 +1,7 @@
 import ReactDatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import ErrorText from "./ErrorText";
+import keyboardScroll from "@lib/utils/KeyboardScroll";
 
 interface Props {
   label: string;
@@ -22,6 +23,7 @@ export default function DatePicker({
       <label htmlFor={label}>{label}</label>
       <ReactDatePicker
         name={label}
+        onFocus={(e) => keyboardScroll(e)}
         selected={value}
         onChange={onChange}
         disabled={disabled}

web/components/atoms/Dropdown.tsx

@@ -1,6 +1,8 @@
 import ReactDropdown, { Option, Group } from "react-dropdown";
 import "react-dropdown/style.css";
 import ErrorText from "./ErrorText";
+import keyboardScroll from "@lib/utils/KeyboardScroll";
+import { useRef } from "react";
 
 interface Props {
   options: (string | Option | Group)[];
@@ -39,7 +41,7 @@ export default function Dropdown({
   placeholder = "Select",
 }: Props) {
   return (
-    <div className="flex flex-col">
+    <div className="flex flex-col" onFocus={(e) => keyboardScroll(e)}>
       <label>{label}</label>
       <ReactDropdown
         options={options}

web/components/atoms/TextInput.tsx

@@ -1,5 +1,6 @@
 import React, { ChangeEvent, useState } from "react";
 import ErrorText from "./ErrorText";
+import keyboardScroll from "@lib/utils/KeyboardScroll";
 
 interface Props {
   label: string;
@@ -27,6 +28,7 @@ export default function TextInput({
       </label>
       <input
         type="text"
+        onFocus={(e) => keyboardScroll(e)}
         {...formValue}
         name={label}
         className={`w-full mt-2 py-2.5 px-2 bg-secondary-background items-center border border-light-gray rounded ${disabled ? "!bg-light-gray" : "!bg-secondary-background"} !text-black ${error ? "!border-[#FF3939]" : "!border-light-gray"}`}

web/lib/utils/keyboardScroll.ts

@@ -0,0 +1,9 @@
+import { FocusEvent } from "react";
+
+export default function keyboardScroll(e: FocusEvent) {
+	e.target.scrollIntoView({
+		behavior: 'smooth',
+		block: 'center',
+		inline: 'center'
+	})
+}