{"patch":"diff --git a\/src\/__tests__\/__snapshots__\/treeContext-test.js.snap b\/src\/__tests__\/__snapshots__\/treeContext-test.js.snap\nindex d50b0a7172..dd268147d9 100644\n--- a\/src\/__tests__\/__snapshots__\/treeContext-test.js.snap\n+++ b\/src\/__tests__\/__snapshots__\/treeContext-test.js.snap\n@@ -1,5 +1,158 @@\n \/\/ Jest Snapshot v1, https:\/\/goo.gl\/fbAQLP\n \n+exports[`TreeListContext owners state should exit the owners list if an element outside the list is selected: 0: mount 1`] = `\n+[root]\n+ ▾ \n+ ▾ \n+ ▾ \n+ ▾ \n+ \n+`;\n+\n+exports[`TreeListContext owners state should exit the owners list if an element outside the list is selected: 1: initial state 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 5,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": null,\n+}\n+`;\n+\n+exports[`TreeListContext owners state should exit the owners list if an element outside the list is selected: 2: child owners tree 1`] = `\n+Object {\n+ \"inspectedElementID\": 4,\n+ \"numElements\": 3,\n+ \"ownerFlatTree\": Array [\n+ Object {\n+ \"children\": Array [\n+ 5,\n+ ],\n+ \"depth\": 0,\n+ \"displayName\": \"Child\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 4,\n+ \"isCollapsed\": false,\n+ \"key\": null,\n+ \"ownerID\": 2,\n+ \"parentID\": 3,\n+ \"type\": 5,\n+ \"weight\": 3,\n+ },\n+ Object {\n+ \"children\": Array [\n+ 6,\n+ ],\n+ \"depth\": 1,\n+ \"displayName\": \"Suspense\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 5,\n+ \"isCollapsed\": false,\n+ \"key\": null,\n+ \"ownerID\": 4,\n+ \"parentID\": 4,\n+ \"type\": 12,\n+ \"weight\": 2,\n+ },\n+ Object {\n+ \"children\": Array [],\n+ \"depth\": 2,\n+ \"displayName\": \"Grandchild\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 6,\n+ \"isCollapsed\": false,\n+ \"key\": null,\n+ \"ownerID\": 4,\n+ \"parentID\": 5,\n+ \"type\": 5,\n+ \"weight\": 1,\n+ },\n+ ],\n+ \"ownerID\": 4,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 4,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\n+\n+exports[`TreeListContext owners state should exit the owners list if an element outside the list is selected: 3: child owners tree 1`] = `\n+Object {\n+ \"inspectedElementID\": 5,\n+ \"numElements\": 3,\n+ \"ownerFlatTree\": Array [\n+ Object {\n+ \"children\": Array [\n+ 5,\n+ ],\n+ \"depth\": 0,\n+ \"displayName\": \"Child\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 4,\n+ \"isCollapsed\": false,\n+ \"key\": null,\n+ \"ownerID\": 2,\n+ \"parentID\": 3,\n+ \"type\": 5,\n+ \"weight\": 3,\n+ },\n+ Object {\n+ \"children\": Array [\n+ 6,\n+ ],\n+ \"depth\": 1,\n+ \"displayName\": \"Suspense\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 5,\n+ \"isCollapsed\": false,\n+ \"key\": null,\n+ \"ownerID\": 4,\n+ \"parentID\": 4,\n+ \"type\": 12,\n+ \"weight\": 2,\n+ },\n+ Object {\n+ \"children\": Array [],\n+ \"depth\": 2,\n+ \"displayName\": \"Grandchild\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 6,\n+ \"isCollapsed\": false,\n+ \"key\": null,\n+ \"ownerID\": 4,\n+ \"parentID\": 5,\n+ \"type\": 5,\n+ \"weight\": 1,\n+ },\n+ ],\n+ \"ownerID\": 4,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 5,\n+ \"selectedElementIndex\": 1,\n+}\n+`;\n+\n+exports[`TreeListContext owners state should exit the owners list if an element outside the list is selected: 4: main tree 1`] = `\n+Object {\n+ \"inspectedElementID\": 5,\n+ \"numElements\": 5,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 5,\n+ \"selectedElementIndex\": 1,\n+}\n+`;\n+\n exports[`TreeListContext owners state should exit the owners list if the current owner is unmounted: 0: mount 1`] = `\n [root]\n ▾ \ndiff --git a\/src\/__tests__\/treeContext-test.js b\/src\/__tests__\/treeContext-test.js\nindex f9e564dfec..560c92e0d6 100644\n--- a\/src\/__tests__\/treeContext-test.js\n+++ b\/src\/__tests__\/treeContext-test.js\n@@ -546,5 +546,52 @@ describe('TreeListContext', () => {\n \n done();\n });\n+\n+ \/\/ This tests ensures support for toggling Suspense boundaries outside of the active owners list.\n+ it('should exit the owners list if an element outside the list is selected', () => {\n+ const Grandchild = () => null;\n+ const Child = () => (\n+ \n+ \n+ <\/React.Suspense>\n+ );\n+ const Parent = () => (\n+ \n+ \n+ <\/React.Suspense>\n+ );\n+\n+ const container = document.createElement('div');\n+ utils.act(() => ReactDOM.render(, container));\n+\n+ expect(store).toMatchSnapshot('0: mount');\n+\n+ let renderer;\n+ utils.act(() => (renderer = TestRenderer.create()));\n+ expect(state).toMatchSnapshot('1: initial state');\n+\n+ const outerSuspenseID = ((store.getElementIDAtIndex(1): any): number);\n+ const childID = ((store.getElementIDAtIndex(2): any): number);\n+ const innerSuspenseID = ((store.getElementIDAtIndex(3): any): number);\n+ const grandchildID = ((store.getElementIDAtIndex(4): any): number);\n+\n+ utils.act(() => dispatch({ type: 'SELECT_OWNER', payload: childID }));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('2: child owners tree');\n+\n+ \/\/ Toggling a Suspense boundary inside of the flat list should update selected index\n+ utils.act(() =>\n+ dispatch({ type: 'SELECT_ELEMENT_BY_ID', payload: innerSuspenseID })\n+ );\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('3: child owners tree');\n+\n+ \/\/ Toggling a Suspense boundary outside of the flat list should exit owners list and update index\n+ utils.act(() =>\n+ dispatch({ type: 'SELECT_ELEMENT_BY_ID', payload: outerSuspenseID })\n+ );\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('4: main tree');\n+ });\n });\n });\ndiff --git a\/src\/devtools\/views\/Components\/TreeContext.js b\/src\/devtools\/views\/Components\/TreeContext.js\nindex 90c514b3e7..7b8f54805a 100644\n--- a\/src\/devtools\/views\/Components\/TreeContext.js\n+++ b\/src\/devtools\/views\/Components\/TreeContext.js\n@@ -488,10 +488,22 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {\n case 'SELECT_ELEMENT_BY_ID':\n if (ownerFlatTree !== null) {\n const payload = (action: ACTION_SELECT_ELEMENT_BY_ID).payload;\n- selectedElementIndex =\n- payload === null\n- ? null\n- : ownerFlatTree.findIndex(element => element.id === payload);\n+ if (payload === null) {\n+ selectedElementIndex = null;\n+ } else {\n+ selectedElementIndex = ownerFlatTree.findIndex(\n+ element => element.id === payload\n+ );\n+\n+ \/\/ If the selected element is outside of the current owners list,\n+ \/\/ exit the list and select the element in the main tree.\n+ \/\/ This supports features like toggling Suspense.\n+ if (selectedElementIndex !== null && selectedElementIndex < 0) {\n+ ownerID = null;\n+ ownerFlatTree = null;\n+ selectedElementIndex = store.getIndexOfElementID(payload);\n+ }\n+ }\n }\n break;\n case 'SELECT_NEXT_ELEMENT_IN_TREE':\n","commit":{"subject":"Support toggling Suspense from within owners list","authorEmail":"bvaughn@fb.com","revision":"f6ec82553de20e39576e5a46a70205c4ad4b0df6","shortRevision":"f6ec82553d","authorName":"Brian Vaughn","authoredAt":"2019-06-12T15:13:51-07:00"},"parents":["f0a29984f451f68c3c2e1c76527f9192065bdf84"],"body":"","files":[{"path":"src\/__tests__\/__snapshots__\/treeContext-test.js.snap","status":"M"},{"path":"src\/__tests__\/treeContext-test.js","status":"M"},{"path":"src\/devtools\/views\/Components\/TreeContext.js","status":"M"}]}

dillon1000/react

Files changed