Fix virtualizer bug when an item changes parents (#6723)

Author: devongovett

packages/@react-spectrum/listbox/test/ListBox.test.js

@@ -759,6 +759,60 @@ describe('ListBox', function () {
     expect(option.id).not.toEqual('Foo');
   });
 
+  it('should handle when an item changes sections', function () {
+    let sections = [
+      {
+        id: 'foo',
+        title: 'Foo',
+        children: [
+          {id: 'foo-1', title: 'Foo 1'},
+          {id: 'foo-2', title: 'Foo 2'}
+        ]
+      },
+      {
+        id: 'bar',
+        title: 'Bar',
+        children: [
+          {id: 'bar-1', title: 'Bar 1'},
+          {id: 'bar-2', title: 'Bar 2'}
+        ]
+      }
+    ];
+
+    function Example({sections}) {
+      return (
+        <Provider theme={theme}>
+          <ListBox aria-label="listbox" items={sections}>
+            {section => (
+              <Section title={section.title} items={section.children}>
+                {item => <Item>{item.title}</Item>}
+              </Section>
+            )}
+          </ListBox>
+        </Provider>
+      );
+    }
+
+    let {getByText, rerender} = render(<Example sections={sections} />);
+    let item = getByText('Foo 1');
+    expect(document.getElementById(item.closest('[role=group]').getAttribute('aria-labelledby'))).toHaveTextContent('Foo');
+
+    let sections2 = [
+      {
+        ...sections[0],
+        children: [sections[0].children[1]]
+      },
+      {
+        ...sections[1],
+        children: [...sections[1].children, sections[0].children[0]]
+      }
+    ];
+
+    rerender(<Example sections={sections2} />);
+    item = getByText('Foo 1');
+    expect(document.getElementById(item.closest('[role=group]').getAttribute('aria-labelledby'))).toHaveTextContent('Bar');
+  });
+
   describe('async loading', function () {
     it('should display a spinner while loading', async function () {
       let {getByRole, rerender} = render(

packages/@react-stately/virtualizer/src/Virtualizer.ts

@@ -101,8 +101,12 @@ export class Virtualizer<T extends object, V> {
     return false;
   }
 
+  private getParentView(layoutInfo: LayoutInfo): ReusableView<T, V> | undefined {
+    return layoutInfo.parentKey != null ? this._visibleViews.get(layoutInfo.parentKey) : this._rootView;
+  }
+
   private getReusableView(layoutInfo: LayoutInfo): ReusableView<T, V> {
-    let parentView = layoutInfo.parentKey != null ? this._visibleViews.get(layoutInfo.parentKey) : this._rootView;
+    let parentView = this.getParentView(layoutInfo)!;
     let view = parentView.getReusableView(layoutInfo.type);
     view.layoutInfo = layoutInfo;
     this._renderView(view);
@@ -194,7 +198,9 @@ export class Virtualizer<T extends object, V> {
 
     let removed = new Set<ReusableView<T, V>>();
     for (let [key, view] of this._visibleViews) {
-      if (!visibleLayoutInfos.has(key)) {
+      let layoutInfo = visibleLayoutInfos.get(key);
+      // If a view's parent changed, treat it as a delete and re-create in the new parent.
+      if (!layoutInfo || view.parent !== this.getParentView(layoutInfo)) {
         this._visibleViews.delete(key);
         view.parent.reuseChild(view);
         removed.add(view); // Defer removing in case we reuse this view.

packages/dev/docs/src/DocSearch.js

@@ -127,7 +127,7 @@ export default function DocSearch() {
 
       sections.push({title, items: items.map((item) => item[0])});
     }
-    let newSuggestions = sections.map((section, index) => ({key: `${index}-${section.title}`, title: section.title, children: section.items}));
+    let newSuggestions = sections.map((section) => ({key: section.title, title: section.title, children: section.items}));
     newSuggestions.push({
       key: 'algolia-footer',
       title: 'Search by',