@k3-tech/react-kit 0.0.56 → 0.0.58

package/src/kit/components/autocomplete/Autocomplete.tsx

@@ -249,65 +249,91 @@ export function Autocomplete<T = unknown>({
     });
   }, [currentValue, options, storeOption]);
 
-  // Load selected labels on mount for initial values
-  const hasLoadedInitial = useRef(false);
-  const [, setLabelsLoadedCounter] = useState(0);
-
+  // Tracks selected values currently being resolved via loadSelected. Doubles
+  // as the loading indicator and the recompute trigger: removing a value on
+  // settle re-renders, and by then its label is already stored in labelMapRef.
+  const [loadingSelectedValues, setLoadingSelectedValues] = useState<
+    Set<string | number>
+  >(() => new Set());
+
+  // Values with a loadSelected fetch currently in flight. Prevents duplicate
+  // concurrent requests when the parent re-renders with a fresh currentValue
+  // reference (common in multiple mode) before the first fetch resolves.
+  const inFlightSelectedRef = useRef<Set<string | number>>(new Set());
+
+  // Load selected labels via loadSelected whenever currentValue changes.
+  // Covers mount, programmatic value changes (even while the dropdown is
+  // closed), and dropdown opens — anything not already cached or resolvable
+  // from the local options array.
   useEffect(() => {
-    // Only run once on mount
-    if (!loadSelected || hasLoadedInitial.current) return;
-    if (!currentValue) return;
-
-    const values = Array.isArray(currentValue) ? currentValue : [currentValue];
-    if (values.length === 0) return;
-
-    // Check if any values are missing labels
-    const missing = values.filter((v) => !labelMapRef.current.has(v));
-    if (missing.length === 0) {
-      hasLoadedInitial.current = true;
-      return;
-    }
+    if (!loadSelected) return;
 
-    hasLoadedInitial.current = true;
-    let cancelled = false;
-    loadSelected(missing)
-      .then((opts) => {
-        if (!cancelled && opts.length > 0) {
-          opts.forEach(storeOption);
-          // Only trigger re-render if we actually stored something
-          setLabelsLoadedCounter((c) => c + 1);
-        }
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-      })
-      .catch(() => { });
-    return () => {
-      cancelled = true;
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [loadSelected, storeOption, currentValue]); // Only run once on mount - uses closure values
-
-  // Load selected labels if missing when dropdown opens
-  useEffect(() => {
-    if (!loadSelected || !isOpen) return;
     const values = Array.isArray(currentValue)
       ? currentValue
       : currentValue
         ? [currentValue]
         : [];
-    const missing = values.filter((v) => !labelMapRef.current.has(v));
+    if (values.length === 0) return;
+
+    // Only fetch values whose labels we don't already have and aren't already
+    // being fetched.
+    const missing = values.filter(
+      (v) => !labelMapRef.current.has(v) && !inFlightSelectedRef.current.has(v),
+    );
     if (missing.length === 0) return;
 
-    let cancelled = false;
+    missing.forEach((v) => {
+      inFlightSelectedRef.current.add(v);
+    });
+
+    // Mark missing values as loading so the UI shows a spinner instead of
+    // flashing the raw value while the fetch is in flight.
+    setLoadingSelectedValues((prev) => {
+      const next = new Set(prev);
+      missing.forEach((v) => {
+        next.add(v);
+      });
+      return next;
+    });
+
     loadSelected(missing)
       .then((opts) => {
-        if (!cancelled) opts.forEach(storeOption);
+        // Store unconditionally — these are ref writes, safe even if this
+        // effect run was superseded. (Guarding on a "cancelled" flag here
+        // dropped labels in multiple mode, where currentValue is a fresh
+        // array reference each render and re-runs/cancels the effect.)
+        opts.forEach((opt) => {
+          storeOption(opt);
+          // Align the returned option back to the originally-requested value
+          // so getLabel finds it even when loadSelected returns a different
+          // value type (e.g. a GraphQL ID serialized as a string while
+          // currentValue holds a number). Match loosely by string, then store
+          // under the exact requested value.
+          const requested = missing.find(
+            (m) => String(m) === String(opt.value),
+          );
+          if (requested !== undefined && requested !== opt.value) {
+            storeOption({ ...opt, value: requested });
+          }
+        });
         // eslint-disable-next-line @typescript-eslint/no-empty-function
       })
-      .catch(() => { });
-    return () => {
-      cancelled = true;
-    };
-  }, [currentValue, loadSelected, isOpen, storeOption]);
+      .catch(() => { })
+      .finally(() => {
+        missing.forEach((v) => {
+          inFlightSelectedRef.current.delete(v);
+        });
+        // Clear the loading flags regardless of outcome; the resulting state
+        // change re-renders and recomputes selectedItems from labelMapRef.
+        setLoadingSelectedValues((prev) => {
+          const next = new Set(prev);
+          missing.forEach((v) => {
+            next.delete(v);
+          });
+          return next;
+        });
+      });
+  }, [currentValue, loadSelected, storeOption]);
 
   // Get label helper
   const getLabel = useCallback((v: string | number) => {
@@ -316,6 +342,12 @@ export function Autocomplete<T = unknown>({
 
   // Selected items for display
   const selectedItems = useMemo(() => {
+    const toItem = (v: string | number) => ({
+      value: v,
+      label: getLabel(v),
+      raw: rawMapRef.current.get(v),
+      loading: loadingSelectedValues.has(v),
+    });
     if (!isMultiple) {
       if (
         currentValue === null ||
@@ -323,22 +355,14 @@ export function Autocomplete<T = unknown>({
         Array.isArray(currentValue)
       )
         return [];
-      return [
-        {
-          value: currentValue,
-          label: getLabel(currentValue),
-          raw: rawMapRef.current.get(currentValue),
-        },
-      ];
+      return [toItem(currentValue)];
     }
     const values = Array.isArray(currentValue) ? currentValue : [];
-    return values.map((v) => ({
-      value: v,
-      label: getLabel(v),
-      raw: rawMapRef.current.get(v),
-    }));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentValue, isMultiple, getLabel]); // labelsLoadedCounter triggers re-compute when loadSelected completes
+    return values.map(toItem);
+    // loadingSelectedValues also drives the recompute when loadSelected
+    // settles: clearing a value's flag re-renders, and its label is in
+    // labelMapRef (a ref React can't track) by then.
+  }, [currentValue, isMultiple, getLabel, loadingSelectedValues]);
 
   // Handle selection
   const handleSelect = useCallback(
@@ -450,13 +474,18 @@ export function Autocomplete<T = unknown>({
     if (isMultiple || isOpen) {
       return searchInput;
     }
-    // In single mode when closed, show selected item label
+    // In single mode when closed, show selected item label. While its label
+    // is still resolving, show nothing (a spinner renders in the trailing
+    // icons) so we don't flash the raw value.
     if (selectedItems.length > 0) {
-      return selectedItems[0].label;
+      return selectedItems[0].loading ? '' : selectedItems[0].label;
     }
     return '';
   }, [isMultiple, isOpen, searchInput, selectedItems]);
 
+  // Whether the single-mode selection is still resolving its label
+  const isSingleSelectionLoading = !isMultiple && !!selectedItems[0]?.loading;
+
   // Downshift
   const { getInputProps, getItemProps, getMenuProps, highlightedIndex } =
     useCombobox({
@@ -542,7 +571,13 @@ export function Autocomplete<T = unknown>({
                   variant={chipVariant}
                   className={cn('gap-1', chipClassName)}
                 >
-                  <span className="max-w-[100px] truncate">{item.label}</span>
+                  <span className="max-w-[100px] truncate">
+                    {item.loading ? (
+                      <Loader2 className="h-3 w-3 animate-spin" />
+                    ) : (
+                      item.label
+                    )}
+                  </span>
                   <button
                     type="button"
                     onClick={(e) => {
@@ -583,7 +618,10 @@ export function Autocomplete<T = unknown>({
             )}
           />
           <div className="flex items-center gap-2 shrink-0">
-            {showClearButton && (
+            {isSingleSelectionLoading && (
+              <Loader2 className="h-4 w-4 animate-spin opacity-50" />
+            )}
+            {showClearButton && !isSingleSelectionLoading && (
               <button
                 type="button"
                 onClick={(e) => {