From 1eae22769e6e1909d6f2cbcc2d98b26b319f81a8 Mon Sep 17 00:00:00 2001
From: Rithvik Nishad <rithvikn2001@gmail.com>
Date: Tue, 1 Nov 2022 16:18:55 +0530
Subject: [PATCH 01/17] `TextFormField` explicit override to break design

---
 src/Components/Form/FormFields/TextFormField.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/Components/Form/FormFields/TextFormField.tsx b/src/Components/Form/FormFields/TextFormField.tsx
index c7e3b8c8de1..2e4e8fbb263 100644
--- a/src/Components/Form/FormFields/TextFormField.tsx
+++ b/src/Components/Form/FormFields/TextFormField.tsx
@@ -5,16 +5,18 @@ import {
   resolveFormFieldError,
 } from "./Utils";
 
-type Props = FormFieldBaseProps<string> & {
+export type TextFormFieldProps = FormFieldBaseProps<string> & {
   placeholder?: string;
   value?: string | number;
   autoComplete?: string;
   type?: "email" | "password" | "search" | "text";
+  className?: string | undefined;
+  removeDefaultClasses?: true | undefined;
   // prefixIcon?: React.ReactNode;
   // suffixIcon?: React.ReactNode;
 };
 
-const TextFormField = (props: Props) => {
+const TextFormField = (props: TextFormFieldProps) => {
   const handleChange = resolveFormFieldChangeEventHandler(props);
   const error = resolveFormFieldError(props);
 
@@ -25,7 +27,11 @@ const TextFormField = (props: Props) => {
     <FormField props={props}>
       <input
         id={props.id}
-        className={`form-input ${bgColor} ${borderColor}`}
+        className={
+          props.removeDefaultClasses
+            ? props.className
+            : `form-input ${bgColor} ${borderColor} ${props.className}`
+        }
         disabled={props.disabled}
         type={props.type || "text"}
         placeholder={props.placeholder}

From 0beb174a096ef5fe6bb06e57c55a1b7d784e3185 Mon Sep 17 00:00:00 2001
From: Rithvik Nishad <rithvikn2001@gmail.com>
Date: Tue, 1 Nov 2022 16:53:11 +0530
Subject: [PATCH 02/17] `TextFormField` support leading and trailing

---
 .../Form/FormFields/TextFormField.tsx         | 70 ++++++++++++-------
 src/style/index.css                           |  2 +-
 2 files changed, 47 insertions(+), 25 deletions(-)

diff --git a/src/Components/Form/FormFields/TextFormField.tsx b/src/Components/Form/FormFields/TextFormField.tsx
index 2e4e8fbb263..d826923f1a6 100644
--- a/src/Components/Form/FormFields/TextFormField.tsx
+++ b/src/Components/Form/FormFields/TextFormField.tsx
@@ -12,8 +12,8 @@ export type TextFormFieldProps = FormFieldBaseProps<string> & {
   type?: "email" | "password" | "search" | "text";
   className?: string | undefined;
   removeDefaultClasses?: true | undefined;
-  // prefixIcon?: React.ReactNode;
-  // suffixIcon?: React.ReactNode;
+  leading?: React.ReactNode | undefined;
+  trailing?: React.ReactNode | undefined;
 };
 
 const TextFormField = (props: TextFormFieldProps) => {
@@ -23,29 +23,51 @@ const TextFormField = (props: TextFormFieldProps) => {
   const bgColor = error ? "bg-red-50" : "bg-gray-200";
   const borderColor = error ? "border-red-500" : "border-gray-200";
 
-  return (
-    <FormField props={props}>
-      <input
-        id={props.id}
-        className={
-          props.removeDefaultClasses
-            ? props.className
-            : `form-input ${bgColor} ${borderColor} ${props.className}`
-        }
-        disabled={props.disabled}
-        type={props.type || "text"}
-        placeholder={props.placeholder}
-        name={props.name}
-        value={props.value}
-        autoComplete={props.autoComplete}
-        required={props.required}
-        onChange={(event) => {
-          event.preventDefault();
-          handleChange(event.target);
-        }}
-      />
-    </FormField>
+  const { leading, trailing } = props;
+  const hasIcon = !!(leading || trailing);
+  const padding = hasIcon && `${leading && "pl-8"} ${trailing && "pr-8"}`;
+
+  let child = (
+    <input
+      id={props.id}
+      className={
+        props.removeDefaultClasses
+          ? props.className
+          : `form-input ${bgColor} ${borderColor} ${props.className} ${padding}`
+      }
+      disabled={props.disabled}
+      type={props.type || "text"}
+      placeholder={props.placeholder}
+      name={props.name}
+      value={props.value}
+      autoComplete={props.autoComplete}
+      required={props.required}
+      onChange={(event) => {
+        event.preventDefault();
+        handleChange(event.target);
+      }}
+    />
   );
+
+  if (hasIcon) {
+    child = (
+      <div className="relative">
+        {leading && (
+          <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+            {leading}
+          </div>
+        )}
+        {child}
+        {trailing && (
+          <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+            {trailing}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return <FormField props={props}>{child}</FormField>;
 };
 
 export default TextFormField;
diff --git a/src/style/index.css b/src/style/index.css
index 54b46f77248..e2bc9528385 100644
--- a/src/style/index.css
+++ b/src/style/index.css
@@ -723,7 +723,7 @@ button:disabled,
 }
 
 .form-input, .form-textarea{
-  @apply text-sm block py-3 px-4 w-full rounded placeholder:text-gray-500 focus:bg-white border-2 focus:border-primary-400 outline-none ring-0 transition-all duration-200 ease-in-out !important
+  @apply text-sm block py-3 px-4 w-full rounded placeholder:text-gray-500 focus:bg-white border-2 focus:border-primary-400 outline-none !ring-0 transition-all duration-200 ease-in-out
 }
 
 .form-textarea {

From 17b73be453b43644f3fb8538ea063f957432da13 Mon Sep 17 00:00:00 2001
From: Rithvik Nishad <rithvikn2001@gmail.com>
Date: Tue, 1 Nov 2022 17:49:44 +0530
Subject: [PATCH 03/17] fix issues with inheriting `form-input` properly

---
 src/Components/Common/DateInputV2.tsx                | 2 +-
 src/Components/Common/SearchBox.tsx                  | 2 +-
 src/Components/Form/FormFields/TextAreaFormField.tsx | 2 +-
 src/Components/Form/FormFields/TextFormField.tsx     | 2 +-
 src/style/index.css                                  | 8 ++------
 5 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/Components/Common/DateInputV2.tsx b/src/Components/Common/DateInputV2.tsx
index 9cd718d6a32..bca37bac84c 100644
--- a/src/Components/Common/DateInputV2.tsx
+++ b/src/Components/Common/DateInputV2.tsx
@@ -166,7 +166,7 @@ const DateInputV2: React.FC<Props> = ({
             <input
               type="text"
               readOnly
-              className={`form-input ${className}`}
+              className={`text-sm block py-3 px-4 w-full rounded placeholder:text-gray-500 focus:bg-white border-2 focus:border-primary-400 outline-none !ring-0 transition-all duration-200 ease-in-out ${className}`}
               placeholder={placeholder ? placeholder : "Select date"}
               value={value && format(value, "yyyy-MM-dd")}
             />
diff --git a/src/Components/Common/SearchBox.tsx b/src/Components/Common/SearchBox.tsx
index e581bde4370..22ed1ae79bd 100644
--- a/src/Components/Common/SearchBox.tsx
+++ b/src/Components/Common/SearchBox.tsx
@@ -43,7 +43,7 @@ export const InputSearchBox = (props: TextFieldPropsExtended) => {
           name="search"
           type="text"
           {...inputProps}
-          className="form-input pr-8 sm:text-sm sm:leading-5 text-ellipsis"
+          className="text-sm block py-3 px-4 w-full rounded placeholder:text-gray-500 focus:bg-white border-2 focus:border-primary-400 outline-none ring-0 transition-all duration-200 ease-in-out pr-8 sm:text-sm sm:leading-5 text-ellipsis"
         />
         {searchValue ? (
           <div
diff --git a/src/Components/Form/FormFields/TextAreaFormField.tsx b/src/Components/Form/FormFields/TextAreaFormField.tsx
index 60a087f5ca8..ff2ebb0035e 100644
--- a/src/Components/Form/FormFields/TextAreaFormField.tsx
+++ b/src/Components/Form/FormFields/TextAreaFormField.tsx
@@ -24,7 +24,7 @@ const TextAreaFormField = ({ rows = 3, ...props }: TextAreaFormFieldProps) => {
     <FormField props={props}>
       <textarea
         id={props.id}
-        className={`form-textarea ${bgColor} ${borderColor}`}
+        className={`text-sm block py-3 px-4 w-full rounded placeholder:text-gray-500 focus:bg-white border-2 focus:border-primary-400 outline-none ring-0 transition-all duration-200 ease-in-out resize-none ${bgColor} ${borderColor}`}
         disabled={props.disabled}
         rows={rows}
         placeholder={props.placeholder}
diff --git a/src/Components/Form/FormFields/TextFormField.tsx b/src/Components/Form/FormFields/TextFormField.tsx
index d826923f1a6..21451c773d7 100644
--- a/src/Components/Form/FormFields/TextFormField.tsx
+++ b/src/Components/Form/FormFields/TextFormField.tsx
@@ -33,7 +33,7 @@ const TextFormField = (props: TextFormFieldProps) => {
       className={
         props.removeDefaultClasses
           ? props.className
-          : `form-input ${bgColor} ${borderColor} ${props.className} ${padding}`
+          : `text-sm block py-3 px-4 w-full rounded placeholder:text-gray-500 focus:bg-white border-2 focus:border-primary-400 outline-none ring-0 transition-all duration-200 ease-in-out ${bgColor} ${borderColor} ${props.className} ${padding}`
       }
       disabled={props.disabled}
       type={props.type || "text"}
diff --git a/src/style/index.css b/src/style/index.css
index e2bc9528385..55a94745583 100644
--- a/src/style/index.css
+++ b/src/style/index.css
@@ -722,12 +722,8 @@ button:disabled,
   box-shadow: 0 0 0 1px #28a745;
 }
 
-.form-input, .form-textarea{
-  @apply text-sm block py-3 px-4 w-full rounded placeholder:text-gray-500 focus:bg-white border-2 focus:border-primary-400 outline-none !ring-0 transition-all duration-200 ease-in-out
-}
-
-.form-textarea {
-  @apply resize-none !important
+.form-input {
+  @apply text-sm block py-3 px-4 w-full rounded placeholder:text-gray-500 focus:bg-white border-2 focus:border-primary-400 outline-none !ring-0 transition-all duration-200 ease-in-out !important
 }
 
 .shifting-page-filter-dropdown .MuiFormControl-root {

From 714bcbd9d4b3dc06247e65582608925d44b5c32f Mon Sep 17 00:00:00 2001
From: Rithvik Nishad <rithvikn2001@gmail.com>
Date: Tue, 1 Nov 2022 17:50:35 +0530
Subject: [PATCH 04/17] utility: `iOS` const to detect if device is iOS

---
 src/Utils/utils.ts | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/src/Utils/utils.ts b/src/Utils/utils.ts
index 45015290b67..ed0ecfc25e6 100644
--- a/src/Utils/utils.ts
+++ b/src/Utils/utils.ts
@@ -85,3 +85,27 @@ export const formatDate = (date: string | Date) => {
 };
 
 export const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));
+
+/**
+ * Referred from: https://stackoverflow.com/a/9039885/7887936
+ * @returns `true` if device is iOS, else `false`
+ */
+function _iOS() {
+  return (
+    [
+      "iPad Simulator",
+      "iPhone Simulator",
+      "iPod Simulator",
+      "iPad",
+      "iPhone",
+      "iPod",
+    ].includes(navigator.platform) ||
+    // iPad on iOS 13 detection
+    (navigator.userAgent.includes("Mac") && "ontouchend" in document)
+  );
+}
+
+/**
+ * `true` if device is iOS, else `false`
+ */
+export const iOS = _iOS();

From 512dbb0901bcfb7d274f9fe171b0d3f9f666dcf7 Mon Sep 17 00:00:00 2001
From: Rithvik Nishad <rithvikn2001@gmail.com>
Date: Wed, 2 Nov 2022 09:37:20 +0530
Subject: [PATCH 05/17] `TextFormField` support ref forwarding

---
 src/Components/Form/FormFields/TextFormField.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/Components/Form/FormFields/TextFormField.tsx b/src/Components/Form/FormFields/TextFormField.tsx
index 21451c773d7..f9bc4af3b99 100644
--- a/src/Components/Form/FormFields/TextFormField.tsx
+++ b/src/Components/Form/FormFields/TextFormField.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import FormField from "./FormField";
 import {
   FormFieldBaseProps,
@@ -16,7 +17,7 @@ export type TextFormFieldProps = FormFieldBaseProps<string> & {
   trailing?: React.ReactNode | undefined;
 };
 
-const TextFormField = (props: TextFormFieldProps) => {
+const TextFormField = React.forwardRef((props: TextFormFieldProps, ref) => {
   const handleChange = resolveFormFieldChangeEventHandler(props);
   const error = resolveFormFieldError(props);
 
@@ -29,6 +30,7 @@ const TextFormField = (props: TextFormFieldProps) => {
 
   let child = (
     <input
+      ref={ref as any}
       id={props.id}
       className={
         props.removeDefaultClasses
@@ -68,6 +70,6 @@ const TextFormField = (props: TextFormFieldProps) => {
   }
 
   return <FormField props={props}>{child}</FormField>;
-};
+});
 
 export default TextFormField;

From a9250b81897e33ee10ed823fbd5f019f6b6bbfc5 Mon Sep 17 00:00:00 2001
From: Rithvik Nishad <rithvikn2001@gmail.com>
Date: Wed, 2 Nov 2022 10:42:31 +0530
Subject: [PATCH 06/17] Make component: `SearchInput`

---
 src/Components/Form/SearchInput.tsx | 71 +++++++++++++++++++++++++++++
 1 file changed, 71 insertions(+)
 create mode 100644 src/Components/Form/SearchInput.tsx

diff --git a/src/Components/Form/SearchInput.tsx b/src/Components/Form/SearchInput.tsx
new file mode 100644
index 00000000000..1d6319860b1
--- /dev/null
+++ b/src/Components/Form/SearchInput.tsx
@@ -0,0 +1,71 @@
+import { createRef, useEffect, useState } from "react";
+import useKeyboardShortcut from "use-keyboard-shortcut";
+import { iOS } from "../../Utils/utils";
+import TextFormField, { TextFormFieldProps } from "./FormFields/TextFormField";
+
+type SearchInputProps = TextFormFieldProps & {
+  className?: string | undefined;
+  debouncePeriod?: number;
+};
+
+export default function SearchInput({
+  debouncePeriod = 500,
+  onChange,
+  ...props
+}: SearchInputProps) {
+  // Debounce related
+  const [value, setValue] = useState(() => props.value);
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      onChange && onChange({ name: props.name, value: value || "" });
+    }, debouncePeriod);
+
+    return () => clearTimeout(timeoutId);
+  }, [value, debouncePeriod, props.name, onChange]);
+
+  // Shortcut key related
+  const ref = createRef<HTMLInputElement>();
+  useKeyboardShortcut(
+    [iOS ? "Meta" : "Control", "K"],
+    () => ref.current?.focus(),
+    {
+      overrideSystem: true,
+    }
+  );
+
+  const shortcutKey = iOS ? (
+    "⌘K"
+  ) : (
+    <div className="flex font-medium gap-1">
+      <span className="text-gray-400">Ctrl</span>
+      <span className="text-gray-500">K</span>
+    </div>
+  );
+
+  return (
+    <TextFormField
+      {...props}
+      ref={ref}
+      className={`${props.className} !bg-white`}
+      leading={
+        props.leading || <i className="text-gray-600 uil uil-search-alt" />
+      }
+      trailing={
+        props.trailing || (
+          <div className="hidden md:flex absolute inset-y-0 right-0 py-1.5 pr-1.5">
+            <kbd className="inline-flex items-center rounded border border-gray-200 px-2 font-sans text-sm font-medium text-gray-500">
+              {shortcutKey}
+            </kbd>
+          </div>
+        )
+      }
+      value={value}
+      onChange={({ value }) => setValue(value)}
+      label=""
+      labelClassName="hidden"
+      errorClassName="hidden"
+      reducerProps={undefined}
+      validate={undefined}
+    />
+  );
+}

From 4aa279c09667985a5c06f396593084f023fffb6e Mon Sep 17 00:00:00 2001
From: Rithvik Nishad <rithvikn2001@gmail.com>
Date: Wed, 2 Nov 2022 10:42:55 +0530
Subject: [PATCH 07/17] replace search input in Assets Page

---
 src/Components/Assets/AssetsList.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/Components/Assets/AssetsList.tsx b/src/Components/Assets/AssetsList.tsx
index 82292b2980e..98d1b2653c1 100644
--- a/src/Components/Assets/AssetsList.tsx
+++ b/src/Components/Assets/AssetsList.tsx
@@ -14,13 +14,13 @@ import React, { useState, useCallback, useEffect } from "react";
 import { navigate, useQueryParams } from "raviger";
 import loadable from "@loadable/component";
 import Pagination from "../Common/Pagination";
-import { InputSearchBox } from "../Common/SearchBox";
 import { make as SlideOver } from "../Common/SlideOver.gen";
 import CircularProgress from "@material-ui/core/CircularProgress";
 import AssetFilter from "./AssetFilter";
 import AdvancedFilterButton from "../Common/AdvancedFilterButton";
 import { parseQueryParams } from "../../Utils/primitives";
 import Chip from "../../CAREUI/display/Chip";
+import SearchInput from "../Form/SearchInput";
 
 const Loading = loadable(() => import("../Common/Loading"));
 
@@ -279,11 +279,14 @@ const AssetsList = () => {
           </div>
         </div>
         <div className="flex-1">
-          <InputSearchBox
+          <SearchInput
+            name="search"
+            label=""
+            labelClassName="hidden"
+            errorClassName="hidden"
             value={qParams.search}
-            search={onSearchSuspects}
-            placeholder="Search by Asset Name"
-            errors=""
+            onChange={({ value }) => onSearchSuspects(value)}
+            placeholder="Search assets"
           />
         </div>
         <div className="flex flex-col md:flex-row lg:ml-2 justify-start items-start gap-2">

From 35b36fb5fd9b027952b70ae9cb712b97d573b56b Mon Sep 17 00:00:00 2001
From: Rithvik Nishad <rithvikn2001@gmail.com>
Date: Wed, 2 Nov 2022 11:09:55 +0530
Subject: [PATCH 08/17] utils: detect Apple device instead of iOS

---
 src/Components/Form/SearchInput.tsx | 8 ++++----
 src/Utils/utils.ts                  | 5 +++--
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/Components/Form/SearchInput.tsx b/src/Components/Form/SearchInput.tsx
index 1d6319860b1..db66f4395c4 100644
--- a/src/Components/Form/SearchInput.tsx
+++ b/src/Components/Form/SearchInput.tsx
@@ -1,6 +1,6 @@
 import { createRef, useEffect, useState } from "react";
 import useKeyboardShortcut from "use-keyboard-shortcut";
-import { iOS } from "../../Utils/utils";
+import { isAppleDevice } from "../../Utils/utils";
 import TextFormField, { TextFormFieldProps } from "./FormFields/TextFormField";
 
 type SearchInputProps = TextFormFieldProps & {
@@ -26,14 +26,14 @@ export default function SearchInput({
   // Shortcut key related
   const ref = createRef<HTMLInputElement>();
   useKeyboardShortcut(
-    [iOS ? "Meta" : "Control", "K"],
+    [isAppleDevice ? "Meta" : "Control", "K"],
     () => ref.current?.focus(),
     {
       overrideSystem: true,
     }
   );
 
-  const shortcutKey = iOS ? (
+  const shortcutKey = isAppleDevice ? (
     "⌘K"
   ) : (
     <div className="flex font-medium gap-1">
@@ -46,7 +46,7 @@ export default function SearchInput({
     <TextFormField
       {...props}
       ref={ref}
-      className={`${props.className} !bg-white`}
+      className={`${props.className} placeholder-shown:bg-white`}
       leading={
         props.leading || <i className="text-gray-600 uil uil-search-alt" />
       }
diff --git a/src/Utils/utils.ts b/src/Utils/utils.ts
index ed0ecfc25e6..d7a17593973 100644
--- a/src/Utils/utils.ts
+++ b/src/Utils/utils.ts
@@ -90,7 +90,8 @@ export const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));
  * Referred from: https://stackoverflow.com/a/9039885/7887936
  * @returns `true` if device is iOS, else `false`
  */
-function _iOS() {
+function _isAppleDevice() {
+  if (navigator.platform.includes("Mac")) return true;
   return (
     [
       "iPad Simulator",
@@ -108,4 +109,4 @@ function _iOS() {
 /**
  * `true` if device is iOS, else `false`
  */
-export const iOS = _iOS();
+export const isAppleDevice = _isAppleDevice();

From 1a1c2d6bbf34cfb26593186e76c9616d8489cec2 Mon Sep 17 00:00:00 2001
From: Rithvik Nishad <rithvikn2001@gmail.com>
Date: Wed, 2 Nov 2022 12:16:02 +0530
Subject: [PATCH 09/17] `TextFormField`: leadingFocused, trailingFocused

---
 .../Form/FormFields/TextFormField.tsx         | 53 ++++++++++++++-----
 1 file changed, 39 insertions(+), 14 deletions(-)

diff --git a/src/Components/Form/FormFields/TextFormField.tsx b/src/Components/Form/FormFields/TextFormField.tsx
index f9bc4af3b99..4297486a74e 100644
--- a/src/Components/Form/FormFields/TextFormField.tsx
+++ b/src/Components/Form/FormFields/TextFormField.tsx
@@ -15,18 +15,20 @@ export type TextFormFieldProps = FormFieldBaseProps<string> & {
   removeDefaultClasses?: true | undefined;
   leading?: React.ReactNode | undefined;
   trailing?: React.ReactNode | undefined;
+  leadingFocused?: React.ReactNode | undefined;
+  trailingFocused?: React.ReactNode | undefined;
 };
 
 const TextFormField = React.forwardRef((props: TextFormFieldProps, ref) => {
   const handleChange = resolveFormFieldChangeEventHandler(props);
   const error = resolveFormFieldError(props);
-
-  const bgColor = error ? "bg-red-50" : "bg-gray-200";
   const borderColor = error ? "border-red-500" : "border-gray-200";
 
   const { leading, trailing } = props;
-  const hasIcon = !!(leading || trailing);
-  const padding = hasIcon && `${leading && "pl-8"} ${trailing && "pr-8"}`;
+  const leadingFocused = props.leadingFocused || props.leading;
+  const trailingFocused = props.trailingFocused || props.trailing;
+  const hasIcon = !!(leading || trailing || leadingFocused || trailingFocused);
+  const padding = `py-3 ${hasIcon ? "px-8" : "px-3"}`;
 
   let child = (
     <input
@@ -35,7 +37,7 @@ const TextFormField = React.forwardRef((props: TextFormFieldProps, ref) => {
       className={
         props.removeDefaultClasses
           ? props.className
-          : `text-sm block py-3 px-4 w-full rounded placeholder:text-gray-500 focus:bg-white border-2 focus:border-primary-400 outline-none ring-0 transition-all duration-200 ease-in-out ${bgColor} ${borderColor} ${props.className} ${padding}`
+          : `peer text-sm block ${padding} w-full rounded placeholder:text-gray-500 bg-gray-200 focus:bg-white border-2 focus:border-primary-400 outline-none ring-0 transition-all duration-200 ease-in-out ${borderColor} ${props.className}`
       }
       disabled={props.disabled}
       type={props.type || "text"}
@@ -52,19 +54,42 @@ const TextFormField = React.forwardRef((props: TextFormFieldProps, ref) => {
   );
 
   if (hasIcon) {
-    child = (
-      <div className="relative">
-        {leading && (
-          <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+    const _leading =
+      leading === leadingFocused ? (
+        <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+          {leading}
+        </div>
+      ) : (
+        <>
+          <div className="opacity-100 peer-focus:opacity-0 translate-y-0 peer-focus:translate-y-1 pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 transition-all duration-500 delay-300 ease-in-out">
             {leading}
           </div>
-        )}
-        {child}
-        {trailing && (
-          <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+          <div className="opacity-0 peer-focus:opacity-100 -translate-y-1 peer-focus:translate-y-0 pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 transition-all duration-500 delay-300 ease-in-out">
+            {leadingFocused}
+          </div>
+        </>
+      );
+    const _trailing =
+      trailing === trailingFocused ? (
+        <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+          {trailing}
+        </div>
+      ) : (
+        <>
+          <div className="opacity-100 peer-focus:opacity-0 translate-y-0 peer-focus:translate-y-1 pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 transition-all duration-500 delay-300 ease-in-out">
             {trailing}
           </div>
-        )}
+          <div className="opacity-0 peer-focus:opacity-100 -translate-y-1 peer-focus:translate-y-0 pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 transition-all duration-500 delay-300 ease-in-out">
+            {trailingFocused}
+          </div>
+        </>
+      );
+
+    child = (
+      <div className="relative">
+        {(leading || leadingFocused) && _leading}
+        {child}
+        {(trailing || trailingFocused) && _trailing}
       </div>
     );
   }

From bdd2aacf0338820ebf611906cd3f9dc33da872b5 Mon Sep 17 00:00:00 2001
From: Rithvik Nishad <rithvikn2001@gmail.com>
Date: Wed, 2 Nov 2022 13:34:32 +0530
Subject: [PATCH 10/17] hide clear icon for input type=search (chrome+ie)

---
 src/style/index.css | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/style/index.css b/src/style/index.css
index 55a94745583..81bf334371e 100644
--- a/src/style/index.css
+++ b/src/style/index.css
@@ -987,3 +987,13 @@ button:disabled,
 .button-size-small { @apply px-2 py-1 text-xs }
 .button-size-default { @apply py-2 px-4 text-sm }
 .button-size-large { @apply py-3 px-5 text-base }
+
+/* clears the ‘X’ from Internet Explorer for input:search */
+input[type=search]::-ms-clear { display: none; width : 0; height: 0; }
+input[type=search]::-ms-reveal { display: none; width : 0; height: 0; }
+
+/* clears the ‘X’ from Chrome for input:search */
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration { display: none; }
\ No newline at end of file

From a0075590c2d68f57422777440603908a03ce0051 Mon Sep 17 00:00:00 2001
From: Rithvik Nishad <rithvikn2001@gmail.com>
Date: Wed, 2 Nov 2022 13:35:38 +0530
Subject: [PATCH 11/17] `SearchInput`: hotkey for clear + custom focus hotkey

---
 src/Components/Form/SearchInput.tsx | 60 ++++++++++++++++++++---------
 1 file changed, 42 insertions(+), 18 deletions(-)

diff --git a/src/Components/Form/SearchInput.tsx b/src/Components/Form/SearchInput.tsx
index db66f4395c4..f4e43a0368a 100644
--- a/src/Components/Form/SearchInput.tsx
+++ b/src/Components/Form/SearchInput.tsx
@@ -6,7 +6,16 @@ import TextFormField, { TextFormFieldProps } from "./FormFields/TextFormField";
 type SearchInputProps = TextFormFieldProps & {
   className?: string | undefined;
   debouncePeriod?: number;
-};
+} & (
+    | {
+        hotkey: string[];
+        hotkeyIcon: React.ReactNode;
+      }
+    | {
+        hotkey?: undefined;
+        hotkeyIcon?: undefined;
+      }
+  );
 
 export default function SearchInput({
   debouncePeriod = 500,
@@ -14,39 +23,47 @@ export default function SearchInput({
   ...props
 }: SearchInputProps) {
   // Debounce related
-  const [value, setValue] = useState(() => props.value);
+  const [value, setValue] = useState(() => props.value || "");
   useEffect(() => {
-    const timeoutId = setTimeout(() => {
-      onChange && onChange({ name: props.name, value: value || "" });
-    }, debouncePeriod);
-
+    const timeoutId = setTimeout(
+      () => onChange && onChange({ name: props.name, value: value || "" }),
+      debouncePeriod
+    );
     return () => clearTimeout(timeoutId);
   }, [value, debouncePeriod, props.name, onChange]);
 
-  // Shortcut key related
+  // Focus hotkey related
   const ref = createRef<HTMLInputElement>();
   useKeyboardShortcut(
-    [isAppleDevice ? "Meta" : "Control", "K"],
+    props.hotkey || [isAppleDevice ? "Meta" : "Control", "K"],
     () => ref.current?.focus(),
     {
       overrideSystem: true,
     }
   );
 
-  const shortcutKey = isAppleDevice ? (
-    "⌘K"
-  ) : (
-    <div className="flex font-medium gap-1">
-      <span className="text-gray-400">Ctrl</span>
-      <span className="text-gray-500">K</span>
-    </div>
-  );
+  const shortcutKeyIcon =
+    props.hotkeyIcon ||
+    (isAppleDevice ? (
+      "⌘K"
+    ) : (
+      <div className="flex font-medium gap-1">
+        <span className="text-gray-400">Ctrl</span>
+        <span className="text-gray-500">K</span>
+      </div>
+    ));
+
+  // Escape hotkey to clear related
+  useKeyboardShortcut(["Escape"], () => setValue(""), {
+    ignoreInputFields: false,
+  });
 
   return (
     <TextFormField
       {...props}
+      type="search"
       ref={ref}
-      className={`${props.className} placeholder-shown:bg-white`}
+      className={`${props.className} enabled:bg-white`}
       leading={
         props.leading || <i className="text-gray-600 uil uil-search-alt" />
       }
@@ -54,11 +71,18 @@ export default function SearchInput({
         props.trailing || (
           <div className="hidden md:flex absolute inset-y-0 right-0 py-1.5 pr-1.5">
             <kbd className="inline-flex items-center rounded border border-gray-200 px-2 font-sans text-sm font-medium text-gray-500">
-              {shortcutKey}
+              {shortcutKeyIcon}
             </kbd>
           </div>
         )
       }
+      trailingFocused={
+        <div className="hidden md:flex absolute inset-y-0 right-0 py-1.5 pr-1.5 gap-1">
+          <kbd className="inline-flex items-center rounded border border-gray-200 px-2 font-sans text-sm font-medium text-gray-500">
+            Esc
+          </kbd>
+        </div>
+      }
       value={value}
       onChange={({ value }) => setValue(value)}
       label=""

From 216fc053bb88e1aaf2ccea169db6430e777807c9 Mon Sep 17 00:00:00 2001
From: Rithvik Nishad <rithvikn2001@gmail.com>
Date: Wed, 2 Nov 2022 13:51:52 +0530
Subject: [PATCH 12/17] `SearchInput`: allow being secondary searchbar

---
 src/Components/Form/SearchInput.tsx | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/Components/Form/SearchInput.tsx b/src/Components/Form/SearchInput.tsx
index f4e43a0368a..b5bd6ca359e 100644
--- a/src/Components/Form/SearchInput.tsx
+++ b/src/Components/Form/SearchInput.tsx
@@ -6,6 +6,7 @@ import TextFormField, { TextFormFieldProps } from "./FormFields/TextFormField";
 type SearchInputProps = TextFormFieldProps & {
   className?: string | undefined;
   debouncePeriod?: number;
+  secondary?: true | undefined;
 } & (
     | {
         hotkey: string[];
@@ -17,11 +18,11 @@ type SearchInputProps = TextFormFieldProps & {
       }
   );
 
-export default function SearchInput({
+const SearchInput = ({
   debouncePeriod = 500,
   onChange,
   ...props
-}: SearchInputProps) {
+}: SearchInputProps) => {
   // Debounce related
   const [value, setValue] = useState(() => props.value || "");
   useEffect(() => {
@@ -36,9 +37,9 @@ export default function SearchInput({
   const ref = createRef<HTMLInputElement>();
   useKeyboardShortcut(
     props.hotkey || [isAppleDevice ? "Meta" : "Control", "K"],
-    () => ref.current?.focus(),
+    () => !props.secondary && ref.current?.focus(),
     {
-      overrideSystem: true,
+      overrideSystem: !props.secondary,
     }
   );
 
@@ -68,13 +69,14 @@ export default function SearchInput({
         props.leading || <i className="text-gray-600 uil uil-search-alt" />
       }
       trailing={
-        props.trailing || (
+        props.trailing ||
+        (!props.secondary && (
           <div className="hidden md:flex absolute inset-y-0 right-0 py-1.5 pr-1.5">
             <kbd className="inline-flex items-center rounded border border-gray-200 px-2 font-sans text-sm font-medium text-gray-500">
               {shortcutKeyIcon}
             </kbd>
           </div>
-        )
+        ))
       }
       trailingFocused={
         <div className="hidden md:flex absolute inset-y-0 right-0 py-1.5 pr-1.5 gap-1">
@@ -92,4 +94,6 @@ export default function SearchInput({
       validate={undefined}
     />
   );
-}
+};
+
+export default SearchInput;

From 679c226ce03d5ea1cc45aedcf2de46633d5f0767 Mon Sep 17 00:00:00 2001
From: Rithvik Nishad <rithvikn2001@gmail.com>
Date: Wed, 2 Nov 2022 14:04:04 +0530
Subject: [PATCH 13/17] `FormField`: label as optional, autohide

---
 src/Components/Assets/AssetsList.tsx         |  3 ---
 src/Components/Form/FormFields/FormField.tsx |  8 +++++---
 src/Components/Form/FormFields/Utils.ts      |  2 +-
 src/Components/Form/SearchInput.tsx          | 14 +++++++-------
 4 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/Components/Assets/AssetsList.tsx b/src/Components/Assets/AssetsList.tsx
index 98d1b2653c1..911c39cb954 100644
--- a/src/Components/Assets/AssetsList.tsx
+++ b/src/Components/Assets/AssetsList.tsx
@@ -281,9 +281,6 @@ const AssetsList = () => {
         <div className="flex-1">
           <SearchInput
             name="search"
-            label=""
-            labelClassName="hidden"
-            errorClassName="hidden"
             value={qParams.search}
             onChange={({ value }) => onSearchSuspects(value)}
             placeholder="Search assets"
diff --git a/src/Components/Form/FormFields/FormField.tsx b/src/Components/Form/FormFields/FormField.tsx
index 5c8e624f4aa..093b50a80e4 100644
--- a/src/Components/Form/FormFields/FormField.tsx
+++ b/src/Components/Form/FormFields/FormField.tsx
@@ -42,9 +42,11 @@ const FormField = (props: {
 
   return (
     <div className={className}>
-      <FieldLabel htmlFor={id} required={required} className={labelClassName}>
-        {label}
-      </FieldLabel>
+      {label && (
+        <FieldLabel htmlFor={id} required={required} className={labelClassName}>
+          {label}
+        </FieldLabel>
+      )}
       {props.children}
       <FieldErrorText
         error={resolveFormFieldError(props.props)}
diff --git a/src/Components/Form/FormFields/Utils.ts b/src/Components/Form/FormFields/Utils.ts
index 24b62254e7e..ec99a036171 100644
--- a/src/Components/Form/FormFields/Utils.ts
+++ b/src/Components/Form/FormFields/Utils.ts
@@ -8,7 +8,7 @@ export type FieldChangeEventHandler<T> = (event: FieldChangeEvent<T>) => void;
 export type FormFieldBaseProps<T> = {
   id?: string;
   name: string;
-  label: React.ReactNode;
+  label?: React.ReactNode;
   disabled?: boolean;
   className?: string;
   required?: boolean;
diff --git a/src/Components/Form/SearchInput.tsx b/src/Components/Form/SearchInput.tsx
index b5bd6ca359e..6cf0bb4595a 100644
--- a/src/Components/Form/SearchInput.tsx
+++ b/src/Components/Form/SearchInput.tsx
@@ -21,17 +21,18 @@ type SearchInputProps = TextFormFieldProps & {
 const SearchInput = ({
   debouncePeriod = 500,
   onChange,
+  name = "search",
   ...props
 }: SearchInputProps) => {
   // Debounce related
   const [value, setValue] = useState(() => props.value || "");
   useEffect(() => {
     const timeoutId = setTimeout(
-      () => onChange && onChange({ name: props.name, value: value || "" }),
+      () => onChange && onChange({ name, value: value || "" }),
       debouncePeriod
     );
     return () => clearTimeout(timeoutId);
-  }, [value, debouncePeriod, props.name, onChange]);
+  }, [value, debouncePeriod, name, onChange]);
 
   // Focus hotkey related
   const ref = createRef<HTMLInputElement>();
@@ -62,6 +63,10 @@ const SearchInput = ({
   return (
     <TextFormField
       {...props}
+      name={name}
+      errorClassName="hidden"
+      reducerProps={undefined}
+      validate={undefined}
       type="search"
       ref={ref}
       className={`${props.className} enabled:bg-white`}
@@ -87,11 +92,6 @@ const SearchInput = ({
       }
       value={value}
       onChange={({ value }) => setValue(value)}
-      label=""
-      labelClassName="hidden"
-      errorClassName="hidden"
-      reducerProps={undefined}
-      validate={undefined}
     />
   );
 };

From f257eefc6c106b152fb65e2a9f3de2afeea0414d Mon Sep 17 00:00:00 2001
From: Rithvik Nishad <rithvikn2001@gmail.com>
Date: Wed, 2 Nov 2022 14:13:54 +0530
Subject: [PATCH 14/17] `SearchInput`: default sizing preference

---
 src/Components/Form/SearchInput.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/Components/Form/SearchInput.tsx b/src/Components/Form/SearchInput.tsx
index 6cf0bb4595a..c36537c8e4d 100644
--- a/src/Components/Form/SearchInput.tsx
+++ b/src/Components/Form/SearchInput.tsx
@@ -20,6 +20,7 @@ type SearchInputProps = TextFormFieldProps & {
 
 const SearchInput = ({
   debouncePeriod = 500,
+  className = "w-full md:max-w-sm",
   onChange,
   name = "search",
   ...props
@@ -69,7 +70,7 @@ const SearchInput = ({
       validate={undefined}
       type="search"
       ref={ref}
-      className={`${props.className} enabled:bg-white`}
+      className={`${className} enabled:bg-white`}
       leading={
         props.leading || <i className="text-gray-600 uil uil-search-alt" />
       }

From bfae54b4ba7899ff0f59a987f41e23d7e59719f9 Mon Sep 17 00:00:00 2001
From: Rithvik Nishad <rithvikn2001@gmail.com>
Date: Wed, 2 Nov 2022 14:44:09 +0530
Subject: [PATCH 15/17] Replace old SearchInputs to tailwind search input

---
 src/Components/ExternalResult/ResultList.tsx  | 23 +++++------
 src/Components/Facility/HospitalList.tsx      | 16 ++++----
 src/Components/Form/SearchInput.tsx           |  1 +
 src/Components/Patient/ManagePatients.tsx     | 31 +++++++--------
 src/Components/Patient/SampleViewAdmin.tsx    | 39 ++++++++-----------
 src/Components/Resource/ListView.tsx          |  5 ---
 src/Components/Resource/ResourceBoardView.tsx |  1 -
 src/Components/Shifting/BoardView.tsx         | 12 +++---
 src/Components/Shifting/ListView.tsx          | 12 +++---
 src/Components/Users/ManageUsers.tsx          | 10 ++---
 10 files changed, 65 insertions(+), 85 deletions(-)

diff --git a/src/Components/ExternalResult/ResultList.tsx b/src/Components/ExternalResult/ResultList.tsx
index cecfd11c78e..7afe5f73b49 100644
--- a/src/Components/ExternalResult/ResultList.tsx
+++ b/src/Components/ExternalResult/ResultList.tsx
@@ -1,5 +1,4 @@
 import loadable from "@loadable/component";
-import Grid from "@material-ui/core/Grid";
 import { Button } from "@material-ui/core";
 import CircularProgress from "@material-ui/core/CircularProgress";
 import { navigate, useQueryParams } from "raviger";
@@ -7,7 +6,6 @@ import React, { useEffect, useState } from "react";
 import { useDispatch } from "react-redux";
 import { externalResultList } from "../../Redux/actions";
 import Pagination from "../Common/Pagination";
-import { InputSearchBox } from "../Common/SearchBox";
 import { make as SlideOver } from "../Common/SlideOver.gen";
 import ListFilter from "./ListFilter";
 import moment from "moment";
@@ -18,6 +16,7 @@ import { FacilityModel } from "../Facility/models";
 import clsx from "clsx";
 import { PhoneNumberField } from "../Common/HelperInputFields";
 import parsePhoneNumberFromString from "libphonenumber-js";
+import SearchInput from "../Form/SearchInput";
 const Loading = loadable(() => import("../Common/Loading"));
 const PageTitle = loadable(() => import("../Common/PageTitle"));
 
@@ -364,17 +363,15 @@ export default function ResultList() {
           </div>
         </div>
         <div className="mt-2">
-          <div>
-            <div className="text-sm font-semibold mb-2">Search by Name</div>
-            <InputSearchBox
-              search={searchByName}
-              value={qParams.name || ""}
-              placeholder="Search by Patient Name"
-              errors=""
-            />
-          </div>
-          <div className="text-sm font-semibold my-2">Search by number</div>
-          <div className="w-full">
+          <SearchInput
+            label="Search by name"
+            name="name"
+            onChange={({ value }) => searchByName(value)}
+            value={qParams.name}
+            placeholder="Search patient"
+          />
+          <div className="text-sm font-medium my-2">Search by number</div>
+          <div className="w-full max-w-sm">
             <PhoneNumberField
               value={qParams.mobile_number || "+91"}
               onChange={(value: string) => searchByPhone(value)}
diff --git a/src/Components/Facility/HospitalList.tsx b/src/Components/Facility/HospitalList.tsx
index 50167ce651c..e09c3ca456f 100644
--- a/src/Components/Facility/HospitalList.tsx
+++ b/src/Components/Facility/HospitalList.tsx
@@ -26,7 +26,6 @@ import loadable from "@loadable/component";
 import { InputLabel, TextField } from "@material-ui/core";
 import Pagination from "../Common/Pagination";
 import { FacilityModel } from "./models";
-import { InputSearchBox } from "../Common/SearchBox";
 import { CSVLink } from "react-csv";
 import moment from "moment";
 import { Theme, createStyles, makeStyles } from "@material-ui/core/styles";
@@ -40,6 +39,7 @@ import * as Notification from "../../Utils/Notifications.js";
 import { Modal } from "@material-ui/core";
 import SelectMenu from "../Common/components/SelectMenu";
 import AccordionV2 from "../Common/components/AccordionV2";
+import SearchInput from "../Form/SearchInput";
 const Loading = loadable(() => import("../Common/Loading"));
 const PageTitle = loadable(() => import("../Common/PageTitle"));
 
@@ -648,14 +648,12 @@ export const HospitalList = (props: any) => {
           </div>
         </div>
         <div className="flex my-4 gap-2 flex-col md:flex-row justify-between flex-grow">
-          <div className="w-full md:w-72">
-            <InputSearchBox
-              value={qParams.search}
-              search={onSearchSuspects}
-              placeholder={t("facility_search_placeholder")}
-              errors=""
-            />
-          </div>
+          <SearchInput
+            name="search"
+            value={qParams.search}
+            onChange={({ value }) => onSearchSuspects(value)}
+            placeholder={t("facility_search_placeholder")}
+          />
 
           <div className="flex items-start mb-2 w-full md:w-auto">
             <button
diff --git a/src/Components/Form/SearchInput.tsx b/src/Components/Form/SearchInput.tsx
index c36537c8e4d..f83e0fb8c4f 100644
--- a/src/Components/Form/SearchInput.tsx
+++ b/src/Components/Form/SearchInput.tsx
@@ -63,6 +63,7 @@ const SearchInput = ({
 
   return (
     <TextFormField
+      labelClassName="text-sm font-medium"
       {...props}
       name={name}
       errorClassName="hidden"
diff --git a/src/Components/Patient/ManagePatients.tsx b/src/Components/Patient/ManagePatients.tsx
index b4b9809948a..27f8cfb5818 100644
--- a/src/Components/Patient/ManagePatients.tsx
+++ b/src/Components/Patient/ManagePatients.tsx
@@ -19,7 +19,6 @@ import {
 import { PhoneNumberField } from "../Common/HelperInputFields";
 import NavTabs from "../Common/NavTabs";
 import Pagination from "../Common/Pagination";
-import { InputSearchBox } from "../Common/SearchBox";
 import {
   ADMITTED_TO,
   GENDER_TYPES,
@@ -35,6 +34,7 @@ import { statusType, useAbortableEffect } from "../../Common/utils";
 import Chip from "../../CAREUI/display/Chip";
 import { FacilityModel, PatientCategory } from "../Facility/models";
 import useWindowDimensions from "../../Common/hooks/useWindowDimensions";
+import SearchInput from "../Form/SearchInput";
 
 const Loading = loadable(() => import("../Common/Loading"));
 const PageTitle = loadable(() => import("../Common/PageTitle"));
@@ -863,25 +863,22 @@ export const PatientManager = (props: any) => {
               <div>
                 <div className="md:flex md:gap-4 mt-1">
                   <div className="grow lg:max-w-sm w-full mb-2">
-                    <div className="text-sm font-semibold mb-2">
-                      Search by Name
-                    </div>
-                    <InputSearchBox
-                      search={searchByName}
+                    <SearchInput
+                      label="Search by Name"
+                      name="name"
+                      onChange={({ value }) => searchByName(value)}
                       value={qParams.name}
-                      placeholder="Search by Patient Name"
-                      errors=""
+                      placeholder="Search patient"
                     />
                   </div>
                   <div className="grow lg:max-w-sm w-full mb-2">
-                    <div className="text-sm font-semibold mb-2">
-                      Search by IP number
-                    </div>
-                    <InputSearchBox
-                      search={searchByIpNo}
+                    <SearchInput
+                      label="Search by IP Number"
+                      name="name"
+                      onChange={({ value }) => searchByIpNo(value)}
                       value={qParams.ip_no}
-                      placeholder="Search by IP number"
-                      errors=""
+                      placeholder="Search IP Number"
+                      secondary
                     />
                   </div>
                 </div>
@@ -889,7 +886,7 @@ export const PatientManager = (props: any) => {
             </div>
             <div className="md:flex md:gap-4">
               <div className="grow lg:max-w-sm w-full">
-                <div className="text-sm font-semibold">
+                <div className="text-sm font-medium">
                   Search by Primary Number
                 </div>
                 <PhoneNumberField
@@ -902,7 +899,7 @@ export const PatientManager = (props: any) => {
                 />
               </div>
               <div className="grow lg:max-w-sm w-full">
-                <div className="text-sm font-semibold">
+                <div className="text-sm font-medium">
                   Search by Emergency Number
                 </div>
                 <PhoneNumberField
diff --git a/src/Components/Patient/SampleViewAdmin.tsx b/src/Components/Patient/SampleViewAdmin.tsx
index 595258fd31e..9300e03d9b7 100644
--- a/src/Components/Patient/SampleViewAdmin.tsx
+++ b/src/Components/Patient/SampleViewAdmin.tsx
@@ -1,4 +1,4 @@
-import { Grid, CircularProgress } from "@material-ui/core";
+import { CircularProgress } from "@material-ui/core";
 import WarningRoundedIcon from "@material-ui/icons/WarningRounded";
 import { make as SlideOver } from "../Common/SlideOver.gen";
 import SampleFilter from "./SampleFilters";
@@ -23,11 +23,11 @@ import {
 import * as Notification from "../../Utils/Notifications";
 import Pagination from "../Common/Pagination";
 import { SampleTestModel } from "./models";
-import { InputSearchBox } from "../Common/SearchBox";
 import UpdateStatusDialog from "./UpdateStatusDialog";
 import { CSVLink } from "react-csv";
 import GetAppIcon from "@material-ui/icons/GetApp";
 import { formatDate } from "../../Utils/utils";
+import SearchInput from "../Form/SearchInput";
 const Loading = loadable(() => import("../Common/Loading"));
 const PageTitle = loadable(() => import("../Common/PageTitle"));
 const now = moment().format("DD-MM-YYYY:hh:mm:ss");
@@ -425,27 +425,20 @@ export default function SampleViewAdmin() {
             </dl>
           </div>
 
-          <div className="w-full">
-            <div className="mt-2">
-              <div className="text-sm font-semibold mb-2">
-                Search by District Name
-              </div>
-              <InputSearchBox
-                value={qParams.district_name}
-                search={searchByDistrict}
-                placeholder="District Name"
-                errors=""
-              />
-            </div>
-            <div className="mt-2">
-              <div className="text-sm font-semibold mb-2">Search by Name</div>
-              <InputSearchBox
-                value={qParams.patient_name}
-                search={searchByName}
-                placeholder="Search by Patient Name"
-                errors=""
-              />
-            </div>
+          <div className="w-full flex flex-col gap-3 p-2">
+            <SearchInput
+              name="patient_name"
+              value={qParams.patient_name}
+              onChange={({ value }) => searchByName(value)}
+              placeholder="Search patient"
+            />
+            <SearchInput
+              name="district_name"
+              value={qParams.district_name}
+              onChange={({ value }) => searchByDistrict(value)}
+              placeholder="Search by district"
+              secondary
+            />
           </div>
 
           <div>
diff --git a/src/Components/Resource/ListView.tsx b/src/Components/Resource/ListView.tsx
index f74956c4596..85516381a21 100644
--- a/src/Components/Resource/ListView.tsx
+++ b/src/Components/Resource/ListView.tsx
@@ -1,6 +1,5 @@
 import React, { useState, useEffect, useMemo } from "react";
 import loadable from "@loadable/component";
-// import { InputSearchBox } from "../Common/SearchBox";
 import { navigate, useQueryParams } from "raviger";
 import { useDispatch } from "react-redux";
 import moment from "moment";
@@ -37,10 +36,6 @@ export default function ListView() {
   const [isLoading, setIsLoading] = useState(false);
   // state to change download button to loading while file is not ready
   const [downloadLoading, setDownloadLoading] = useState(false);
-  // const [modalFor, setModalFor] = useState({
-  //   externalId: undefined,
-  //   loading: false,
-  // });
 
   const local = useMemo(
     () => JSON.parse(localStorage.getItem("resource-filters") || "{}"),
diff --git a/src/Components/Resource/ResourceBoardView.tsx b/src/Components/Resource/ResourceBoardView.tsx
index 66774b1c656..c49929795a1 100644
--- a/src/Components/Resource/ResourceBoardView.tsx
+++ b/src/Components/Resource/ResourceBoardView.tsx
@@ -4,7 +4,6 @@ import ListFilter from "./ListFilter";
 import ResourceBoard from "./ResourceBoard";
 import { RESOURCE_CHOICES } from "../../Common/constants";
 import { make as SlideOver } from "../Common/SlideOver.gen";
-// import { InputSearchBox } from "../Common/SearchBox";
 import { downloadResourceRequests } from "../../Redux/actions";
 import loadable from "@loadable/component";
 import { CSVLink } from "react-csv";
diff --git a/src/Components/Shifting/BoardView.tsx b/src/Components/Shifting/BoardView.tsx
index 8948836d954..feadd3b65c7 100644
--- a/src/Components/Shifting/BoardView.tsx
+++ b/src/Components/Shifting/BoardView.tsx
@@ -5,7 +5,6 @@ import ShiftingBoard from "./ShiftingBoard";
 import BadgesList from "./BadgesList";
 import { SHIFTING_CHOICES } from "../../Common/constants";
 import { make as SlideOver } from "../Common/SlideOver.gen";
-import { InputSearchBox } from "../Common/SearchBox";
 import { downloadShiftRequests } from "../../Redux/actions";
 import loadable from "@loadable/component";
 import { CSVLink } from "react-csv";
@@ -15,6 +14,7 @@ import CircularProgress from "@material-ui/core/CircularProgress";
 import GetAppIcon from "@material-ui/icons/GetApp";
 import withScrolling from "react-dnd-scrolling";
 import { formatFilter } from "./Commons";
+import SearchInput from "../Form/SearchInput";
 
 const Loading = loadable(() => import("../Common/Loading"));
 const PageTitle = loadable(() => import("../Common/PageTitle"));
@@ -112,11 +112,11 @@ export default function BoardView() {
           />
         </div>
         <div className="w-full flex pt-2 lg:space-x-4 items-center flex-col lg:flex-row justify-between">
-          <InputSearchBox
-            value={qParams.patient_name || ""}
-            search={searchByName}
-            placeholder="Patient Name"
-            errors=""
+          <SearchInput
+            name="patient_name"
+            value={qParams.patient_name}
+            onChange={({ value }) => searchByName(value)}
+            placeholder="Search patient"
           />
           <div className="bg-gray-200 text-sm text-gray-500 leading-none border-2 border-gray-200 rounded-full inline-flex mt-1">
             <button
diff --git a/src/Components/Shifting/ListView.tsx b/src/Components/Shifting/ListView.tsx
index 9b678cfc6fd..fe229b7f871 100644
--- a/src/Components/Shifting/ListView.tsx
+++ b/src/Components/Shifting/ListView.tsx
@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from "react";
 import loadable from "@loadable/component";
-import { InputSearchBox } from "../Common/SearchBox";
 import { navigate, useQueryParams } from "raviger";
 import { useDispatch } from "react-redux";
 import BadgesList from "./BadgesList";
@@ -19,6 +18,7 @@ import { Modal, Button, CircularProgress } from "@material-ui/core";
 
 import { limit, formatFilter } from "./Commons";
 import { formatDate } from "../../Utils/utils";
+import SearchInput from "../Form/SearchInput";
 
 const Loading = loadable(() => import("../Common/Loading"));
 const PageTitle = loadable(() => import("../Common/PageTitle"));
@@ -371,11 +371,11 @@ export default function ListView() {
         />
 
         <div className="md:px-4">
-          <InputSearchBox
-            value={qParams.patient_name || ""}
-            search={searchByName}
-            placeholder="Patient Name"
-            errors=""
+          <SearchInput
+            name="patient_name"
+            value={qParams.patient_name}
+            onChange={({ value }) => searchByName(value)}
+            placeholder="Search patient"
           />
         </div>
         <div className="w-32">
diff --git a/src/Components/Users/ManageUsers.tsx b/src/Components/Users/ManageUsers.tsx
index 2c9b34f7744..ca779561319 100644
--- a/src/Components/Users/ManageUsers.tsx
+++ b/src/Components/Users/ManageUsers.tsx
@@ -15,7 +15,6 @@ import {
 import Pagination from "../Common/Pagination";
 import { navigate, useQueryParams } from "raviger";
 import { USER_TYPES, RESULTS_PER_PAGE_LIMIT } from "../../Common/constants";
-import { InputSearchBox } from "../Common/SearchBox";
 import { FacilityModel } from "../Facility/models";
 
 import { IconButton, CircularProgress } from "@material-ui/core";
@@ -30,6 +29,7 @@ import UserDetails from "../Common/UserDetails";
 import clsx from "clsx";
 import UnlinkFacilityDialog from "./UnlinkFacilityDialog";
 import useWindowDimensions from "../../Common/hooks/useWindowDimensions";
+import SearchInput from "../Form/SearchInput";
 
 const Loading = loadable(() => import("../Common/Loading"));
 const PageTitle = loadable(() => import("../Common/PageTitle"));
@@ -613,11 +613,11 @@ export default function ManageUsers() {
         </div>
         <div className="flex flex-col lg:flex-row justify-between col-span-2 lg:px-3 space-y-3 lg:space-y-0 lg:space-x-4 my-2">
           <div className="w-full">
-            <InputSearchBox
-              search={onUserNameChange}
+            <SearchInput
+              name="search"
+              onChange={({ value }) => onUserNameChange(value)}
               value={qParams.username}
-              placeholder="Search by User Name"
-              errors=""
+              placeholder="Search by username"
             />
           </div>
 

From 5bbaf6b6dd48b86f59c957936af6b1b63fdc94aa Mon Sep 17 00:00:00 2001
From: Rithvik Nishad <rithvikn2001@gmail.com>
Date: Wed, 2 Nov 2022 14:45:40 +0530
Subject: [PATCH 16/17] delete old search box

---
 package.json                        |  1 -
 src/Components/Common/SearchBox.tsx | 67 -----------------------------
 2 files changed, 68 deletions(-)
 delete mode 100644 src/Components/Common/SearchBox.tsx

diff --git a/package.json b/package.json
index cf00c5bf177..e957c127f81 100644
--- a/package.json
+++ b/package.json
@@ -71,7 +71,6 @@
     "libphonenumber-js": "^1.10.13",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
-    "postcss-loader": "^7.0.1",
     "qrcode.react": "^1.0.1",
     "querystring": "^0.2.1",
     "raviger": "^4.1.1",
diff --git a/src/Components/Common/SearchBox.tsx b/src/Components/Common/SearchBox.tsx
deleted file mode 100644
index 22ed1ae79bd..00000000000
--- a/src/Components/Common/SearchBox.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import React, { useCallback, useState, useEffect } from "react";
-import { TextFieldProps } from "@material-ui/core";
-import debounce from "lodash/debounce";
-
-type TextFieldPropsExtended = TextFieldProps & {
-  errors: string;
-  search: (value: string) => void;
-  value?: string;
-};
-
-export const InputSearchBox = (props: TextFieldPropsExtended) => {
-  const { search, placeholder, value } = props;
-  const [searchValue, setSearchValue] = useState(value);
-  const handler = useCallback(debounce(search, 1200), [search]);
-
-  const handleKeyDown = (event: any) => {
-    const value = event.target.value;
-    setSearchValue(value);
-    if (value.length === 0 || value.length > 2) {
-      handler(value);
-    }
-  };
-
-  useEffect(() => {
-    setSearchValue(value);
-  }, [value]);
-
-  const clearSearch = () => {
-    handler("");
-    setSearchValue("");
-  };
-
-  const inputProps = {
-    placeholder,
-    onChange: handleKeyDown,
-    value: searchValue,
-  };
-
-  return (
-    <div className="md:flex top-0 bg-gray-100">
-      <div className="relative rounded-md lg:max-w-sm w-full">
-        <input
-          name="search"
-          type="text"
-          {...inputProps}
-          className="text-sm block py-3 px-4 w-full rounded placeholder:text-gray-500 focus:bg-white border-2 focus:border-primary-400 outline-none ring-0 transition-all duration-200 ease-in-out pr-8 sm:text-sm sm:leading-5 text-ellipsis"
-        />
-        {searchValue ? (
-          <div
-            className="absolute inset-y-0 right-0 pr-3 flex items-center cursor-pointer"
-            onClick={clearSearch}
-          >
-            <span className="text-gray-500 sm:text-sm sm:leading-5">
-              <i className="fas fa-times text-md "></i>
-            </span>
-          </div>
-        ) : (
-          <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
-            <span className="text-gray-500 sm:text-sm sm:leading-5">
-              <i className="fas fa-search text-md "></i>
-            </span>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};

From 6c95dfd21f362089dbb62d5c7951f569e338ebd5 Mon Sep 17 00:00:00 2001
From: Rithvik Nishad <rithvikn2001@gmail.com>
Date: Wed, 2 Nov 2022 14:54:27 +0530
Subject: [PATCH 17/17] undo removal of postcss loader when merging

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index 60358379866..505ada30338 100644
--- a/package.json
+++ b/package.json
@@ -67,6 +67,7 @@
     "echarts-for-react": "^3.0.1",
     "i18next": "^20.3.1",
     "i18next-browser-languagedetector": "^7.0.0",
+    "postcss-loader": "^7.0.1",
     "libphonenumber-js": "^1.10.13",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",