Fix multi-select dropdown for facilities in user creation module (#8086)

* Fix multi-select dropdown for facilities in user creation module * if NOptions is undefined then all the facilities will be shown.If not then that particular number will be shown. * Apply suggestions from code review --------- Co-authored-by: Mohammed Nihal <[email protected]> Co-authored-by: Rithvik Nishad <[email protected]>
ohcnetwork · Jul 9, 2024 · 0f5b54c · 0f5b54c
1 parent a76b958
commit 0f5b54c
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git a/src/Components/Common/FacilitySelect.tsx b/src/Components/Common/FacilitySelect.tsx
@@ -17,7 +17,7 @@ interface FacilitySelectProps {
   district?: string;
   state?: string;
   showAll?: boolean;
-  showNOptions?: number;
+  showNOptions?: number | undefined;
   freeText?: boolean;
   selected?: FacilityModel | FacilityModel[] | null;
   setSelected: (selected: FacilityModel | FacilityModel[] | null) => void;
@@ -34,7 +34,7 @@ export const FacilitySelect = (props: FacilitySelectProps) => {
     searchAll,
     disabled = false,
     showAll = true,
-    showNOptions = 10,
+    showNOptions,
     className = "",
     facilityType,
     district,
@@ -65,6 +65,7 @@ export const FacilitySelect = (props: FacilitySelectProps) => {
         data?.results?.push({
           name: text,
         });
+
       return data?.results;
     },
     [searchAll, showAll, facilityType, district, exclude_user, freeText],

diff --git a/src/Components/Form/AutoCompleteAsync.tsx b/src/Components/Form/AutoCompleteAsync.tsx
@@ -18,7 +18,7 @@ interface Props {
   onChange: (selected: any) => void;
   optionLabel?: (option: any) => string;
   optionLabelChip?: (option: any) => string;
-  showNOptions?: number;
+  showNOptions?: number | undefined;
   multiple?: boolean;
   compareBy?: string;
   debounceTime?: number;
@@ -40,7 +40,7 @@ const AutoCompleteAsync = (props: Props) => {
     onChange,
     optionLabel = (option: any) => option.label,
     optionLabelChip = (option: any) => option.label,
-    showNOptions = 10,
+    showNOptions,
     multiple = false,
     compareBy,
     debounceTime = 300,
@@ -62,8 +62,13 @@ const AutoCompleteAsync = (props: Props) => {
     () =>
       debounce(async (query: string) => {
         setLoading(true);
-        const data = await fetchData(query);
-        setData(data?.slice(0, showNOptions) || []);
+        const data = (await fetchData(query)) || [];
+
+        if (showNOptions !== undefined) {
+          setData(data.slice(0, showNOptions));
+        } else {
+          setData(data);
+        }
         setLoading(false);
       }, debounceTime),
     [fetchData, showNOptions, debounceTime],
@@ -102,7 +107,6 @@ const AutoCompleteAsync = (props: Props) => {
               onChange={({ target }) => setQuery(target.value)}
               onFocus={props.onFocus}
               onBlur={() => {
-                setQuery("");
                 props.onBlur?.();
               }}
               autoComplete="off"