From a0e6e621260a3501e3828c3ad9f14ae7efd3d94f Mon Sep 17 00:00:00 2001
From: NitinPSingh <71833171+NitinPSingh@users.noreply.github.com>
Date: Wed, 30 Oct 2024 16:50:34 +0530
Subject: [PATCH] Fix#8815 fixed clear button functionaly and center aligned
 arrow dropdown arrow (#8895)

---
 src/components/Facility/SpokeFacilityEditor.tsx |  5 +++--
 src/components/Form/AutoCompleteAsync.tsx       | 17 +++++------------
 2 files changed, 8 insertions(+), 14 deletions(-)

diff --git a/src/components/Facility/SpokeFacilityEditor.tsx b/src/components/Facility/SpokeFacilityEditor.tsx
index a6dfe9e00aa..bf07ec4e9bb 100644
--- a/src/components/Facility/SpokeFacilityEditor.tsx
+++ b/src/components/Facility/SpokeFacilityEditor.tsx
@@ -78,7 +78,8 @@ export default function SpokeFacilityEditor(props: SpokeFacilityEditorProps) {
     setItem: (item: FacilitySpokeModel | FacilitySpokeRequest) => void,
     processing: boolean,
   ) => {
-    const [selectedFacility, setSelectedFacility] = useState<FacilityModel>();
+    const [selectedFacility, setSelectedFacility] =
+      useState<FacilityModel | null>(null);
 
     useEffect(() => {
       setItem({ ...item, spoke: selectedFacility?.id });
@@ -99,7 +100,7 @@ export default function SpokeFacilityEditor(props: SpokeFacilityEditorProps) {
             showNOptions={8}
             selected={selectedFacility}
             setSelected={(v) =>
-              v && !Array.isArray(v) && setSelectedFacility(v)
+              (v === null || !Array.isArray(v)) && setSelectedFacility(v)
             }
             errors=""
             className="w-full"
diff --git a/src/components/Form/AutoCompleteAsync.tsx b/src/components/Form/AutoCompleteAsync.tsx
index ddec1503042..839a74c880c 100644
--- a/src/components/Form/AutoCompleteAsync.tsx
+++ b/src/components/Form/AutoCompleteAsync.tsx
@@ -100,7 +100,7 @@ const AutoCompleteAsync = (props: Props) => {
         immediate
       >
         <div className="relative mt-1">
-          <div className="flex">
+          <div className="relative flex">
             <ComboboxInput
               id={id}
               name={name}
@@ -125,12 +125,12 @@ const AutoCompleteAsync = (props: Props) => {
             />
             {!disabled && (
               <ComboboxButton className="absolute inset-y-0 right-0 flex items-center pr-2">
-                <div className="absolute right-0 top-1 mr-2 flex items-center text-lg text-secondary-900">
+                <div className="absolute right-0 mr-2 flex items-center text-lg text-secondary-900">
                   {hasSelection && !loading && !required && (
                     <div className="tooltip" id="clear-button">
                       <CareIcon
                         icon="l-times-circle"
-                        className="mb-[-5px] h-4 w-4 text-secondary-800 transition-colors duration-200 ease-in-out hover:text-secondary-500"
+                        className="h-4 w-4 text-secondary-800 transition-colors duration-200 ease-in-out hover:text-secondary-500"
                         onClick={(e) => {
                           e.preventDefault();
                           onChange(null);
@@ -142,16 +142,9 @@ const AutoCompleteAsync = (props: Props) => {
                     </div>
                   )}
                   {loading ? (
-                    <CareIcon
-                      icon="l-spinner"
-                      className="-mb-1.5 animate-spin"
-                    />
+                    <CareIcon icon="l-spinner" className="animate-spin" />
                   ) : (
-                    <CareIcon
-                      id="dropdown-toggle"
-                      icon="l-angle-down"
-                      className="-mb-1.5"
-                    />
+                    <CareIcon id="dropdown-toggle" icon="l-angle-down" />
                   )}
                 </div>
               </ComboboxButton>