From e5bfca2b1dc9caace3cbd7a9cae364868a9cae0c Mon Sep 17 00:00:00 2001
From: Abdul Rahman <81605929+abdulrahmancodes@users.noreply.github.com>
Date: Mon, 5 May 2025 17:16:00 +0530
Subject: [PATCH] Fix crash when hiding a column in Kanban view (#11847)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### Problem
When hiding a kanban view column, users encountered the following error:
`Instance id is not provided and cannot be found in context.`

This was caused by the `SelectableListItem` for the "HiddenGroups" menu
item not being wrapped in a `SelectableList`. As a result, the required
context (specifically, the selectableListInstanceId) was missing,
leading to errors in recoil state management.

### Solution
This PR wraps the "HiddenGroups" `SelectableListItem` in its own
`SelectableList` component, providing the necessary context and ensuring
that the component family selectors work as expected.


https://github.com/user-attachments/assets/19e030d0-a28a-4993-b952-99d10b6e7a92

Closes #11828

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
---
 ...jectOptionsDropdownRecordGroupsContent.tsx | 25 +++++++++++--------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupsContent.tsx b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupsContent.tsx
index d9d78a1a4..88f5cb233 100644
--- a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupsContent.tsx
+++ b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupsContent.tsx
@@ -102,7 +102,6 @@ export const ObjectOptionsDropdownRecordGroupsContent = () => {
   const selectableItemIdArray = [
     ...(currentView?.key !== 'INDEX' ? ['GroupBy', 'Sort'] : []),
     'HideEmptyGroups',
-    ...(hiddenRecordGroupIds.length > 0 ? ['HiddenGroups'] : []),
   ];
 
   return (
@@ -185,16 +184,22 @@ export const ObjectOptionsDropdownRecordGroupsContent = () => {
         <>
           <DropdownMenuSeparator />
           <DropdownMenuItemsContainer scrollable={false}>
-            <SelectableListItem
-              itemId="HiddenGroups"
-              onEnter={() => onContentChange('hiddenRecordGroups')}
+            <SelectableList
+              selectableListInstanceId={`${OBJECT_OPTIONS_DROPDOWN_ID}-hidden-groups`}
+              hotkeyScope={TableOptionsHotkeyScope.Dropdown}
+              selectableItemIdArray={['HiddenGroups']}
             >
-              <MenuItemNavigate
-                onClick={() => onContentChange('hiddenRecordGroups')}
-                LeftIcon={IconEyeOff}
-                text={`Hidden ${recordGroupFieldMetadata?.label ?? ''}`}
-              />
-            </SelectableListItem>
+              <SelectableListItem
+                itemId="HiddenGroups"
+                onEnter={() => onContentChange('hiddenRecordGroups')}
+              >
+                <MenuItemNavigate
+                  onClick={() => onContentChange('hiddenRecordGroups')}
+                  LeftIcon={IconEyeOff}
+                  text={`Hidden ${recordGroupFieldMetadata?.label ?? ''}`}
+                />
+              </SelectableListItem>
+            </SelectableList>
           </DropdownMenuItemsContainer>
         </>
       )}