fix location selecting issue

Author: Bawanthathilan

packages/framework/esm-styleguide/src/location-selector/location-selector.component.tsx

@@ -1,9 +1,13 @@
-import React, { useState, useMemo } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ComboBox } from '@carbon/react';
 import { useLocationByUuid, useLocations } from '../location-picker/location-picker.resource';
 import styles from './location-selector.module.scss';
 
+interface Location {
+  resource: { id: string; name: string };
+}
+
 interface LocationSelectorProps {
   selectedLocationUuid?: string;
   defaultLocationUuid?: string;
@@ -25,46 +29,49 @@ export const LocationSelector: React.FC<LocationSelectorProps> = ({
 }) => {
   const { t } = useTranslation();
   const [searchTerm, setSearchTerm] = useState<string>('');
+  const [tempLocations, setTempLocations] = useState<Location[]>([]);
 
-  let defaultLocation = useLocationByUuid(defaultLocationUuid).location;
+  const { location: defaultLocation } = useLocationByUuid(defaultLocationUuid);
+  const { locations: fetchedLocations = [] } = useLocations(locationTag, locationsPerRequest, searchTerm);
 
-  const { locations: fetchedLocations } = useLocations(locationTag, locationsPerRequest, searchTerm);
+  useEffect(() => {
+    if (fetchedLocations.length > 0) {
+      setTempLocations(fetchedLocations);
+    }
+  }, [fetchedLocations]);
 
-  const locations = useMemo(() => {
+  const effectiveLocations = useMemo<Location[]>(() => {
+    const base = fetchedLocations.length > 0 ? fetchedLocations : tempLocations;
     if (defaultLocation && !searchTerm) {
-      return [defaultLocation, ...fetchedLocations?.filter(({ resource }) => resource.id !== defaultLocationUuid)];
+      return [defaultLocation, ...base.filter((loc) => loc.resource.id !== defaultLocationUuid)];
     }
-    return fetchedLocations;
-  }, [defaultLocation, fetchedLocations]);
+    return base;
+  }, [defaultLocation, defaultLocationUuid, fetchedLocations, tempLocations, searchTerm]);
 
-  const handleSearch = (searchString) => {
-    setSearchTerm(searchString);
-  };
-
-  const items = useMemo(() => {
-    const filtered = locations.map((loc) => ({
-      id: loc.resource.id,
-      name: loc.resource.name,
-    }));
-    return filtered;
-  }, [locations, searchTerm]);
+  const items = useMemo(
+    () =>
+      effectiveLocations.map((loc) => ({
+        id: loc.resource.id,
+        label: loc.resource.name,
+      })),
+    [effectiveLocations],
+  );
 
   return (
     <section data-testid="combo">
       <div className={styles.sectionTitle}>{Locationlabel}</div>
-      <div>
-        <ComboBox
-          aria-label={comBoxLabel}
-          id="location"
-          invalidText={'Required'}
-          items={items}
-          itemToString={(item) => item?.name || ''}
-          selectedItem={items.find((item) => item.id === selectedLocationUuid)}
-          onChange={({ selectedItem }) => onChange(selectedItem?.id)}
-          onInputChange={(searchTerm) => handleSearch(searchTerm)}
-          titleText={comBoxLabel}
-        />
-      </div>
+      <ComboBox
+        aria-label={comBoxLabel}
+        id="location"
+        invalidText={t('Required')}
+        items={items}
+        initialSelectedItem={items.find((i) => i.id === defaultLocationUuid)}
+        selectedItem={items.find((i) => i.id === selectedLocationUuid)}
+        itemToString={(item) => item?.label || ''}
+        onChange={(evt) => onChange(evt.selectedItem?.id)}
+        onInputChange={(value) => setSearchTerm(value)}
+        titleText={comBoxLabel}
+      />
     </section>
   );
 };