From 51adeedd5d3bb0b3d81185f9b5bcdb875edfafe3 Mon Sep 17 00:00:00 2001
From: Colin Read <coread@cisco.com>
Date: Fri, 31 Jan 2025 16:51:44 +0000
Subject: [PATCH] feat(list): test for deregistering callbacks

---
 src/components/List/List.tsx                  |  2 +-
 .../ListItemBase/ListItemBase.test.tsx        | 34 +++++++++++++++++++
 2 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/src/components/List/List.tsx b/src/components/List/List.tsx
index 1fb3e9937..707e1a9bf 100644
--- a/src/components/List/List.tsx
+++ b/src/components/List/List.tsx
@@ -1,4 +1,4 @@
-import React, { RefObject, useImperativeHandle, useRef, forwardRef, useMemo } from 'react';
+import React, { RefObject, useImperativeHandle, useRef, forwardRef } from 'react';
 import classnames from 'classnames';
 
 import { DEFAULTS, STYLE } from './List.constants';
diff --git a/src/components/ListItemBase/ListItemBase.test.tsx b/src/components/ListItemBase/ListItemBase.test.tsx
index 2f746300d..db1a0e7ac 100644
--- a/src/components/ListItemBase/ListItemBase.test.tsx
+++ b/src/components/ListItemBase/ListItemBase.test.tsx
@@ -544,6 +544,40 @@ describe('ListItemBase', () => {
     expect(getByTestId('list-item-1')).toHaveFocus();
   });
 
+  it('if an item index changes for a particular item, the old item should not be remembered', async () => {
+    const { getByTestId, rerender } = render(
+      <List shouldFocusOnPress listSize={2}>
+        <ListItemBase key={'base0'} data-testid="list-item-1" itemIndex={0}>
+          <ButtonPill>1</ButtonPill>
+        </ListItemBase>
+        <ListItemBase key={'base1'} data-testid="list-item-2" itemIndex={1}>
+          <ButtonPill>2</ButtonPill>
+        </ListItemBase>
+      </List>
+    );
+
+    simulateOnPress(getByTestId, 'list-item-2');
+
+    expect(getByTestId('list-item-2')).toHaveFocus();
+
+    rerender(
+      <List shouldFocusOnPress listSize={2}>
+        <ListItemBase key={'base0'} data-testid="list-item-1" itemIndex={3}>
+          <ButtonPill>1</ButtonPill>
+        </ListItemBase>
+        <ListItemBase key={'base1'} data-testid="list-item-2" itemIndex={1}>
+          <ButtonPill>2</ButtonPill>
+        </ListItemBase>
+      </List>
+    );
+
+    // press up arrow key
+    fireEvent.keyDown(getByTestId('list-item-2'), { key: 'ArrowUp' });
+
+    // If the old item index was remembered, the focus would be on list-item-1
+    expect(getByTestId('list-item-2')).toHaveFocus();
+  });
+
   it('should not focus on press with focusChild even if shouldFocusOnPress is set', async () => {
     const { getByTestId } = render(
       <List shouldFocusOnPress listSize={1}>