change bg of auto-selector, remove value of search from url when click on x button on autoselector, remove to set data of search field in clinics page, fix remove data and update state filter after click on clearAll text in autoselector of doctors age

components/clinics/head/SearchBar.js

@@ -37,22 +37,6 @@ function SearchBar({
         placeholder="جستجوی تخصص"
         handleSearch={handleSearch}
       />
-      {/* <TextField
-        variant="standard"
-        onChange={(e) => handleSearch(e.target.value)}
-        InputProps={{
-          disableUnderline: true,
-        }}
-        sx={{
-          background: "transparent !important",
-          "& .MuiInputBase-input": { color: "#7E7E7E" },
-          "& .MuiInput-root": { borderBottom: "none" },
-          "& .MuiInputBase-root": { height: "100%" },
-        }}
-        placeholder="جستجوی تخصص"
-        dir="rtl"
-        className={`!shadow-none !w-full !min-w-3 !px-5 !h-full bg-[#FAFAFA] !text-[14px] md:!text-[16px] lg:!min-w-[50%] !rounded-0 !font-normal !text-[#6C757D]`}
-      /> */}
       <Button
         onClick={handleSearch}
         className="

components/clinics/index.js

@@ -18,10 +18,10 @@ function ClinicsPage({ clinics, matchedCity, matchedState }) {
   });
 
   const handleSearch = (value) => {
-    const current = new URLSearchParams(window.location.search);
-    current.set("search", value);
-    const queryString = current.toString();
-    router.push(`/clinics?${queryString}`);
+    // const current = new URLSearchParams(window.location.search);
+    // current.set("search", value);
+    // const queryString = current.toString();
+    // router.push(`/clinics?${queryString}`);
   };
 
   return (

components/doctors/head/index.js

@@ -67,6 +67,7 @@ function Head({ matchedCity, matchedState, setDoctors }) {
         throw err;
       });
   };
+  console.log(filter);
 
   return (
     <div className="flex justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px] flex-col items-center mt-0 md:mt-[40px] lg:mt-[90px]">

components/doctors/search/SearchField.js

@@ -1,11 +1,29 @@
 import AutoCompleteSearch from "@/components/searchHead/smSearch/AutoCompleteSearch";
 import specialties from "@/data/specialties.json";
+import { clearFilterParams } from "@/helper";
+import { useRouter } from "next/navigation";
 
-function SearchField({ filter, updateData }) {
+function SearchField({ filter, setFilter, updateData, setDataInURL }) {
+  const router = useRouter();
+
+  const clearText = () => {
+    clearFilterParams(router, ["name", "category", "specialty"]);
+    const newFilter = {
+      ...filter,
+      ...{
+        name: "",
+        category: undefined,
+        specialty: undefined,
+      },
+    };
+    setFilter(newFilter);
+    // setDataInURL(newFilter);
+  };
   return (
     <div className="!min-w-[50%] !w-[524px]">
       <AutoCompleteSearch
         data={specialties}
+        clearText={clearText}
         inputValue={filter.name}
         handleSearch={(e) => updateData("name", e)}
         placeholder="جستجوی نام پزشک، تخصص، بیماری ..."

components/doctors/search/SendReq.js

@@ -7,10 +7,9 @@ function SendReq({ filter, setFilter, setDataInURL, sendReq }) {
   const [loading, setLoading] = useState(false);
   const checkName = () => {
     let newFilter = filter;
-    let reqData = filter;
-    const specialtyItem = specialties.find((item) =>
-      item.name.includes(filter.name)
-    );
+    const specialtyItem =
+      filter.name &&
+      specialties.find((item) => item.name.includes(filter.name));
 
     if (specialtyItem) {
       if (specialtyItem.parent) {
@@ -21,23 +20,18 @@ function SendReq({ filter, setFilter, setDataInURL, sendReq }) {
       } else {
         newFilter.specialty = specialtyItem;
       }
-      reqData = newFilter;
-      reqData.name = "";
-    } else {
-      reqData = newFilter;
     }
 
-    setFilter(newFilter);
-    setDataInURL(newFilter);
-
-    return reqData;
+    return newFilter;
   };
 
   const filterData = () => {
     setLoading(true);
-    const reqData = checkName();
+    const newFilter = checkName();
+    setFilter(newFilter);
+    setDataInURL(newFilter);
 
-    sendReq(reqData).finally(() => {
+    sendReq(newFilter).finally(() => {
       setLoading(false);
     });
   };

components/doctors/search/index.js

@@ -36,7 +36,12 @@ function SearchBar({ filter, sendReq, setFilter, updateData, setDataInURL }) {
           </div>
         </Button>
       </FilterModal>
-      <SearchField filter={filter} updateData={updateData} />
+      <SearchField
+        filter={filter}
+        setFilter={setFilter}
+        updateData={updateData}
+        setDataInURL={setDataInURL}
+      />
       <SendReq
         filter={filter}
         sendReq={sendReq}

components/home/search/Fields.js

@@ -28,8 +28,9 @@ function Fields({ city, state }) {
         <ButtonFilter setOpen={setOpen} selected={data} />
       </ModalSearchCity>
       <span className="black w-px bg-[#EFEFEF]"></span>
-      <div className=" !w-full lg:!w-[524px]">
+      <div className="!w-full lg:!w-[524px] flex items-center justify-start">
         <AutoCompleteSearch
+          noneBg={true}
           data={specialtiesData}
           inputValue={data.search}
           handleSearch={(e) => setData({ data, search: e })}

components/searchHead/smSearch/AutoCompleteSearch.js

@@ -2,12 +2,25 @@ import { Autocomplete, TextField } from "@mui/material";
 
 function AutoCompleteSearch({
   data,
+  noneBg,
+  clearText,
   inputValue,
   placeholder,
   handleSearch,
   setInputValue,
   setSelectedOption,
 }) {
+  // ایجاد props شرطی برای clearIndicator
+  const clearIndicatorProps = clearText
+    ? {
+        clearIndicator: {
+          onClick: () => {
+            clearText();
+          },
+        },
+      }
+    : {};
+
   return (
     <Autocomplete
       freeSolo
@@ -15,23 +28,23 @@ function AutoCompleteSearch({
       getOptionLabel={(option) => option.name}
       inputValue={inputValue}
       className="!w-full"
-      onInputChange={(event, newInputValue) => {
+      onInputChange={(_, newInputValue) => {
         setInputValue && setInputValue(newInputValue);
         handleSearch(newInputValue);
       }}
-      onChange={(event, newValue) => {
+      onChange={(_, newValue) => {
         setSelectedOption && setSelectedOption(newValue);
         handleSearch(newValue ? newValue.name : "");
       }}
+      componentsProps={clearIndicatorProps}
       renderOption={(props, option) => (
         <li {...props} key={option.id}>
-          {" "}
           {option.name}
         </li>
       )}
       sx={{
         "& .MuiAutocomplete-input": {
-          background: "#ffffff !important",
+          background: noneBg ? "" : "#ffffff !important",
         },
       }}
       renderInput={(params) => (