fix: Updating collection when items change parents (#8052)

Author: devongovett

packages/@react-aria/collections/src/Document.ts

@@ -460,9 +460,13 @@ export class Document<T, C extends BaseCollection<T> = BaseCollection<T>> extend
   }
 
   updateCollection(): void {
-    // First, update the indices of dirty element children.
+    // First, remove disconnected nodes and update the indices of dirty element children.
     for (let element of this.dirtyNodes) {
-      element.updateChildIndices();
+      if (element instanceof ElementNode && (!element.isConnected || element.isHidden)) {
+        this.removeNode(element);
+      } else {
+        element.updateChildIndices();
+      }
     }
 
     // Next, update dirty collection nodes.
@@ -471,8 +475,6 @@ export class Document<T, C extends BaseCollection<T> = BaseCollection<T>> extend
         if (element.isConnected && !element.isHidden) {
           element.updateNode();
           this.addNode(element);
-        } else {
-          this.removeNode(element);
         }
 
         element.isMutated = false;

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

@@ -337,6 +337,54 @@ describe('ListBox', () => {
     expect(getAllByRole('option').map(o => o.textContent)).toEqual(['Hi']);
   });
 
+  it('should update collection when moving item to a different section', () => {
+    let {getAllByRole, rerender} = render(
+      <ListBox aria-label="Test">
+        <ListBoxSection id="veggies">
+          <Header>Veggies</Header>
+          <ListBoxItem key="lettuce" id="lettuce">Lettuce</ListBoxItem>
+          <ListBoxItem key="tomato" id="tomato">Tomato</ListBoxItem>
+          <ListBoxItem key="onion" id="onion">Onion</ListBoxItem>
+        </ListBoxSection>
+        <ListBoxSection id="meats">
+          <Header>Meats</Header>
+          <ListBoxItem key="ham" id="ham">Ham</ListBoxItem>
+          <ListBoxItem key="tuna" id="tuna">Tuna</ListBoxItem>
+          <ListBoxItem key="tofu" id="tofu">Tofu</ListBoxItem>
+        </ListBoxSection>
+      </ListBox>
+    );
+
+    let sections = getAllByRole('group');
+    let items = within(sections[0]).getAllByRole('option');
+    expect(items).toHaveLength(3);
+    items = within(sections[1]).getAllByRole('option');
+    expect(items).toHaveLength(3);
+
+    rerender(
+      <ListBox aria-label="Test">
+        <ListBoxSection id="veggies">
+          <Header>Veggies</Header>
+          <ListBoxItem key="lettuce" id="lettuce">Lettuce</ListBoxItem>
+          <ListBoxItem key="tomato" id="tomato">Tomato</ListBoxItem>
+          <ListBoxItem key="onion" id="onion">Onion</ListBoxItem>
+          <ListBoxItem key="ham" id="ham">Ham</ListBoxItem>
+        </ListBoxSection>
+        <ListBoxSection id="meats">
+          <Header>Meats</Header>
+          <ListBoxItem key="tuna" id="tuna">Tuna</ListBoxItem>
+          <ListBoxItem key="tofu" id="tofu">Tofu</ListBoxItem>
+        </ListBoxSection>
+      </ListBox>
+    );
+
+    sections = getAllByRole('group');
+    items = within(sections[0]).getAllByRole('option');
+    expect(items).toHaveLength(4);
+    items = within(sections[1]).getAllByRole('option');
+    expect(items).toHaveLength(2);
+  });
+
   it('should support autoFocus', () => {
     let {getByRole} = renderListbox({autoFocus: true});
     let listbox = getByRole('listbox');