Fixed bug in Store.getIndexOfElementID() that caused roots with multiple top-level children to return an incorrect item index

src/__tests__/store-test.js

@@ -696,4 +696,91 @@ describe('Store', () => {
       expect(store).toMatchSnapshot('4: toggle fallback on');
     });
   });
+
+  describe('getIndexOfElementID', () => {
+    beforeEach(() => {
+      store.collapseNodesByDefault = false;
+    });
+
+    it('should support a single root with a single child', () => {
+      const Grandparent = () => (
+        <React.Fragment>
+          <Parent />
+          <Parent />
+        </React.Fragment>
+      );
+      const Parent = () => <Child />;
+      const Child = () => null;
+
+      act(() =>
+        ReactDOM.render(<Grandparent />, document.createElement('div'))
+      );
+
+      for (let i = 0; i < store.numElements; i++) {
+        expect(store.getIndexOfElementID(store.getElementIDAtIndex(i))).toBe(i);
+      }
+    });
+
+    it('should support multiple roots with one children each', () => {
+      const Grandparent = () => <Parent />;
+      const Parent = () => <Child />;
+      const Child = () => null;
+
+      act(() => {
+        ReactDOM.render(<Grandparent />, document.createElement('div'));
+        ReactDOM.render(<Grandparent />, document.createElement('div'));
+      });
+
+      for (let i = 0; i < store.numElements; i++) {
+        expect(store.getIndexOfElementID(store.getElementIDAtIndex(i))).toBe(i);
+      }
+    });
+
+    it('should support a single root with multiple top level children', () => {
+      const Grandparent = () => <Parent />;
+      const Parent = () => <Child />;
+      const Child = () => null;
+
+      act(() =>
+        ReactDOM.render(
+          <React.Fragment>
+            <Grandparent />
+            <Grandparent />
+          </React.Fragment>,
+          document.createElement('div')
+        )
+      );
+
+      for (let i = 0; i < store.numElements; i++) {
+        expect(store.getIndexOfElementID(store.getElementIDAtIndex(i))).toBe(i);
+      }
+    });
+
+    it('should support multiple roots with multiple top level children', () => {
+      const Grandparent = () => <Parent />;
+      const Parent = () => <Child />;
+      const Child = () => null;
+
+      act(() => {
+        ReactDOM.render(
+          <React.Fragment>
+            <Grandparent />
+            <Grandparent />
+          </React.Fragment>,
+          document.createElement('div')
+        );
+        ReactDOM.render(
+          <React.Fragment>
+            <Grandparent />
+            <Grandparent />
+          </React.Fragment>,
+          document.createElement('div')
+        );
+      });
+
+      for (let i = 0; i < store.numElements; i++) {
+        expect(store.getIndexOfElementID(store.getElementIDAtIndex(i))).toBe(i);
+      }
+    });
+  });
 });

src/devtools/store.js

@@ -429,12 +429,6 @@ export default class Store extends EventEmitter {
     let index = 0;
     while (true) {
       const current = ((this._idToElement.get(currentID): any): Element);
-      if (current.parentID === 0) {
-        // We found the root; stop crawling.
-        break;
-      }
-
-      index++;
 
       const { children } = current;
       for (let i = 0; i < children.length; i++) {
@@ -446,6 +440,13 @@ export default class Store extends EventEmitter {
         index += child.isCollapsed ? 1 : child.weight;
       }
 
+      if (current.parentID === 0) {
+        // We found the root; stop crawling.
+        break;
+      }
+
+      index++;
+
       previousID = current.id;
       currentID = current.parentID;
     }