From cb261564974361ceac763af040f7cfd1d7249fc6 Mon Sep 17 00:00:00 2001
From: tsar-boomba <itg.2048@gmail.com>
Date: Thu, 12 Sep 2024 16:17:51 -0400
Subject: [PATCH] Add keyboard scroll to inputs

---
 web/components/atoms/DatePicker.tsx | 2 ++
 web/components/atoms/Dropdown.tsx   | 4 +++-
 web/components/atoms/TextInput.tsx  | 2 ++
 web/lib/utils/keyboardScroll.ts     | 9 +++++++++
 4 files changed, 16 insertions(+), 1 deletion(-)
 create mode 100644 web/lib/utils/keyboardScroll.ts

diff --git a/web/components/atoms/DatePicker.tsx b/web/components/atoms/DatePicker.tsx
index f65e040..6c7f32b 100644
--- a/web/components/atoms/DatePicker.tsx
+++ b/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}
diff --git a/web/components/atoms/Dropdown.tsx b/web/components/atoms/Dropdown.tsx
index 0095649..0daf487 100644
--- a/web/components/atoms/Dropdown.tsx
+++ b/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}
diff --git a/web/components/atoms/TextInput.tsx b/web/components/atoms/TextInput.tsx
index d4ce185..45898b4 100644
--- a/web/components/atoms/TextInput.tsx
+++ b/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"}`}
diff --git a/web/lib/utils/keyboardScroll.ts b/web/lib/utils/keyboardScroll.ts
new file mode 100644
index 0000000..29edf66
--- /dev/null
+++ b/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'
+	})
+}