From abf532b548235689fb37a3e79f07776ff52f6caf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D5=A1=D3=84=D5=A1?= <wingkwong.code@gmail.com>
Date: Mon, 15 Apr 2024 03:37:27 +0800
Subject: [PATCH] fix: selectedKeys are not present in the collection warning
 in async case (#2648)

* fix(hook): add AsyncLoadable & show warning after data is loaded

* fix(hooks): change isLoading default state to true

* refactor(hooks): move the logic to missingKeys

* refactor(changeset): rephrase changeset description
---
 .changeset/rare-plums-speak.md                           | 6 ++++++
 .../src/use-multiselect-list-state.ts                    | 9 ++++++---
 .../stories-utils/src/hooks/use-pokemon-list.ts          | 2 +-
 3 files changed, 13 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/rare-plums-speak.md

diff --git a/.changeset/rare-plums-speak.md b/.changeset/rare-plums-speak.md
new file mode 100644
index 0000000000..bfcb5315d0
--- /dev/null
+++ b/.changeset/rare-plums-speak.md
@@ -0,0 +1,6 @@
+---
+"@nextui-org/use-aria-multiselect": patch
+"@nextui-org/stories-utils": patch
+---
+
+Fixed an issue where a warning was triggered in the Select component when `defaultSelectedKeys` were used and items were still loading (#2605).
diff --git a/packages/hooks/use-aria-multiselect/src/use-multiselect-list-state.ts b/packages/hooks/use-aria-multiselect/src/use-multiselect-list-state.ts
index 216e191fba..f031020215 100644
--- a/packages/hooks/use-aria-multiselect/src/use-multiselect-list-state.ts
+++ b/packages/hooks/use-aria-multiselect/src/use-multiselect-list-state.ts
@@ -1,8 +1,11 @@
 import {ListState, useListState} from "@react-stately/list";
-import {CollectionBase, MultipleSelection, Node} from "@react-types/shared";
+import {CollectionBase, MultipleSelection, AsyncLoadable, Node} from "@react-types/shared";
 import {Key, useMemo} from "react";
 
-export interface MultiSelectListProps<T> extends CollectionBase<T>, MultipleSelection {}
+export interface MultiSelectListProps<T>
+  extends CollectionBase<T>,
+    AsyncLoadable,
+    MultipleSelection {}
 
 export interface MultiSelectListState<T> extends ListState<T> {
   /** The keys for the currently selected items. */
@@ -26,7 +29,7 @@ export function useMultiSelectListState<T extends object>(
   } = useListState<T>(props);
 
   const missingKeys: Key[] = useMemo(() => {
-    if (selectedKeys.size !== 0) {
+    if (!props.isLoading && selectedKeys.size !== 0) {
       return Array.from(selectedKeys)
         .filter(Boolean)
         .filter((key) => !collection.getItem(`${key}`));
diff --git a/packages/utilities/stories-utils/src/hooks/use-pokemon-list.ts b/packages/utilities/stories-utils/src/hooks/use-pokemon-list.ts
index fb65ba443c..f6c7152b6b 100644
--- a/packages/utilities/stories-utils/src/hooks/use-pokemon-list.ts
+++ b/packages/utilities/stories-utils/src/hooks/use-pokemon-list.ts
@@ -14,7 +14,7 @@ export type UsePokemonListProps = {
 export function usePokemonList({fetchDelay = 0}: UsePokemonListProps = {}) {
   const [items, setItems] = useState<Pokemon[]>([]);
   const [hasMore, setHasMore] = useState(true);
-  const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
   const [offset, setOffset] = useState(0);
   const limit = 20; // Number of items per page, adjust as necessary