From b63c8a548e423fc3693cfcd05b76fc1fb3420e3f Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Fri, 20 Mar 2026 01:30:01 +0100
Subject: [PATCH] Fix collectable collection selecting initial items lazily

---
 src/base/collection/hooks/useSelectableCollection.ts |  6 +++++-
 src/base/components/settings/CheckboxListSetting.tsx |  2 +-
 src/features/category/components/CategorySelect.tsx  | 11 +++++++----
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/base/collection/hooks/useSelectableCollection.ts b/src/base/collection/hooks/useSelectableCollection.ts
index ac989846..e9d9eab6 100644
--- a/src/base/collection/hooks/useSelectableCollection.ts
+++ b/src/base/collection/hooks/useSelectableCollection.ts
@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { useCallback, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 export type SelectableCollectionReturnType<Id extends number | string, Key extends string = string> = {
     selectedItemIds: Id[];
@@ -134,6 +134,10 @@ export const useSelectableCollection = <Id extends number | string, Key extends
         setKeyToSelectedItemIds(initialState);
     }, [clearSelection, initialState]);
 
+    useEffect(() => {
+        setKeyToSelectedItemIds(initialState);
+    }, [initialState]);
+
     return {
         selectedItemIds,
         keySelectedItemIds,
diff --git a/src/base/components/settings/CheckboxListSetting.tsx b/src/base/components/settings/CheckboxListSetting.tsx
index 9e861338..1a36678f 100644
--- a/src/base/components/settings/CheckboxListSetting.tsx
+++ b/src/base/components/settings/CheckboxListSetting.tsx
@@ -50,7 +50,7 @@ export function CheckboxListSetting<Item>({
     const { selectedItemIds, handleSelection, handleSelectAll, reset } = useSelectableCollection(items.length, {
         currentKey: 'default',
         itemIds,
-        initialState: { default: currentSelectedItemIds },
+        initialState: useMemo(() => ({ default: currentSelectedItemIds }), [currentSelectedItemIds]),
     });
 
     const handleCancel = () => {
diff --git a/src/features/category/components/CategorySelect.tsx b/src/features/category/components/CategorySelect.tsx
index 8749ac98..69414d45 100644
--- a/src/features/category/components/CategorySelect.tsx
+++ b/src/features/category/components/CategorySelect.tsx
@@ -126,10 +126,13 @@ export function CategorySelect(props: CategorySelectProps) {
         'categoriesToAdd' | 'categoriesToRemove'
     >(allCategories.length, {
         currentKey: 'categoriesToAdd',
-        initialState: {
-            categoriesToAdd: [...mangaCategoryIds, ...defaultCategoryIds],
-            categoriesToRemove: [],
-        },
+        initialState: useMemo(
+            () => ({
+                categoriesToAdd: [...mangaCategoryIds, ...defaultCategoryIds],
+                categoriesToRemove: [],
+            }),
+            [mangaCategoryIds, defaultCategoryIds],
+        ),
     });
 
     useEffect(() => {