fixed: clear input value after clearing filter

src/components/Common/SearchByMultipleFields.tsx

@@ -1,29 +1,33 @@
 import React, {
-  useState,
   useCallback,
-  useRef,
   useEffect,
   useMemo,
+  useRef,
+  useState,
 } from "react";
 import { useTranslation } from "react-i18next";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
+
 import { cn } from "@/lib/utils";
+
 import CareIcon from "@/CAREUI/icons/CareIcon";
-import PhoneNumberFormField from "@/components/Form/FormFields/PhoneNumberFormField";
-import { FieldError } from "@/components/Form/FieldValidators";
+
+import { Button } from "@/components/ui/button";
 import {
   Command,
   CommandGroup,
   CommandItem,
   CommandList,
 } from "@/components/ui/command";
+import { Input } from "@/components/ui/input";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
 
+import { FieldError } from "@/components/Form/FieldValidators";
+import PhoneNumberFormField from "@/components/Form/FormFields/PhoneNumberFormField";
+
 interface SearchOption {
   key: string;
   label: string;
@@ -41,6 +45,7 @@ interface SearchByMultipleFieldsProps {
   className?: string;
   inputClassName?: string;
   buttonClassName?: string;
+  clearSearch?: { value: boolean; params?: string[] };
 }
 
 type EventType = {
@@ -55,6 +60,7 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
   className,
   inputClassName,
   buttonClassName,
+  clearSearch,
 }) => {
   const { t } = useTranslation();
   const [selectedOption, setSelectedOption] = useState<SearchOption>(
@@ -65,6 +71,16 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
   const inputRef = useRef<HTMLInputElement>(null);
   const [focusedIndex, setFocusedIndex] = useState(0);
   const [error, setError] = useState<string | undefined | boolean>();
+
+  useEffect(() => {
+    if (clearSearch?.value) {
+      const clearinput = options
+        .map((op) => op.key)
+        .some((element) => clearSearch.params?.includes(element));
+      clearinput ? setSearchValue("") : null;
+    }
+  }, [clearSearch]);
+
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === "/" && document.activeElement !== inputRef.current) {

src/components/Patient/ManagePatients.tsx

@@ -90,6 +90,7 @@ export const PatientManager = () => {
     Pagination,
     FilterBadges,
     resultsPerPage,
+    clearSearch,
   } = useFilters({
     limit: 12,
     cacheBlacklist: [
@@ -1005,6 +1006,7 @@ export const PatientManager = () => {
             <SearchByMultipleFields
               options={searchOptions}
               onSearch={handleSearch}
+              clearSearch={clearSearch}
             />
           </div>
         </div>

src/hooks/useFilters.tsx

@@ -34,6 +34,10 @@ export default function useFilters({
   const hasPagination = limit > 0;
   const [showFilters, setShowFilters] = useState(false);
   const [qParams, _setQueryParams] = useQueryParams();
+  const [clearSearch, setClearSearch] = useState<{
+    value: boolean;
+    params?: string[];
+  }>({ value: false });
 
   const updateCache = (query: QueryParam) => {
     const blacklist = FILTERS_CACHE_BLACKLIST.concat(cacheBlacklist);
@@ -63,6 +67,7 @@ export default function useFilters({
   const updateQuery = (filter: FilterState) => {
     filter = hasPagination ? { page: 1, limit, ...filter } : filter;
     setQueryParams(Object.assign({}, qParams, filter), { replace: true });
+    setClearSearch({ value: false });
   };
   const updatePage = (page: number) => {
     if (!hasPagination) return;
@@ -71,6 +76,7 @@ export default function useFilters({
   const removeFilters = (params?: string[]) => {
     params ??= Object.keys(qParams);
     setQueryParams(removeFromQuery(qParams, params));
+    setClearSearch({ value: true, params: params });
   };
   const removeFilter = (param: string) => removeFilters([param]);
 
@@ -203,7 +209,7 @@ export default function useFilters({
 
     return (
       <div
-        className={`col-span-3 my-2 flex w-full flex-wrap items-center gap-2 ${show ? "" : "hidden"}`}
+        className={`col-span-3 my-2 flex w-full flex-wrap items-center gap-2 md:mt-10  ${show ? "" : "hidden"}`}
       >
         {compiledBadges.map((props) => (
           <FilterBadge {...props} name={t(props.name)} key={props.name} />
@@ -268,6 +274,7 @@ export default function useFilters({
      * @param param is the key of the filter to be removed.
      */
     removeFilter,
+    clearSearch,
 
     /**
      * Removes multiple filters from query param

src/hooks/useFullscreen.ts

@@ -35,7 +35,6 @@ export default function useFullscreen() {
       elem.webkitExitFullscreen(); // Safari
     else document.exitFullscreen();
   }
-
   const setFullscreen = (
     value: boolean,
     element?: HTMLElement,