Fix useListState infinite loop (#6621)

* Fix useListState infinite loop

Author: snowystinger

packages/@react-stately/list/src/useListState.ts

@@ -82,16 +82,18 @@ export function useListState<T extends object>(props: ListProps<T>): ListState<T
         ),
         itemNodes.length - 1);
       let newNode:Node<T>;
+      let isReverseSearching = false;
       while (index >= 0) {
         if (!selectionManager.isDisabled(itemNodes[index].key)) {
           newNode = itemNodes[index];
           break;
         }
         // Find next, not disabled item.
-        if (index < itemNodes.length - 1) {
+        if (index < itemNodes.length - 1 && !isReverseSearching) {
           index++;
         // Otherwise, find previous, not disabled item.
         } else {
+          isReverseSearching = true;
           if (index > startItem.index) {
             index = startItem.index;
           }

packages/react-aria-components/test/TagGroup.test.js

@@ -13,6 +13,7 @@
 import {Button, Label, RouterProvider, Tag, TagGroup, TagList, Text} from '../';
 import {fireEvent, mockClickDefault, pointerMap, render} from '@react-spectrum/test-utils-internal';
 import React from 'react';
+import {useListData} from '@react-stately/data';
 import userEvent from '@testing-library/user-event';
 
 let TestTagGroup = ({tagGroupProps, tagListProps, itemProps}) => (
@@ -351,4 +352,45 @@ describe('TagGroup', () => {
       });
     });
   });
+  it('if we cannot restore focus to next, then restore to previous but do not try focusing next again', async () => {
+    function MyTagGroup(props) {
+      const fruitsList = useListData({
+        initialItems: [
+          {id: 2, name: 'Grape'},
+          {id: 3, name: 'Plum'},
+          {id: 4, name: 'Watermelon'}
+        ]
+      });
+      return (
+        <TagGroup
+          data-testid="group"
+          aria-label="Fruits"
+          items={fruitsList.items}
+          selectionMode="multiple"
+          disabledKeys={[2, 3]}
+          onRemove={(keys) => fruitsList.remove(...keys)}>
+          <TagList items={fruitsList.items}>
+            {(item) => <MyTag item={item}>{item.name}</MyTag>}
+          </TagList>
+        </TagGroup>
+      );
+    }
+    function MyTag({children, item, ...props}) {
+      return (
+        <Tag textValue={item.name} {...props}>
+          {({isDisabled}) => (
+            <>
+              {children}
+              <Button slot="remove" isDisabled={isDisabled} aria-label={'remove'} />
+            </>
+          )}
+        </Tag>
+      );
+    }
+    let {getByRole} = render(<MyTagGroup />);
+    let grid = getByRole('grid');
+    await user.tab();
+    await user.keyboard('{Backspace}');
+    expect(grid).toHaveFocus();
+  });
 });