feat: call onFocusItem with first item if focused item is missing (#363)

Author: lukasbach

next-release-notes.md

@@ -1,9 +1,4 @@
-<!--
-### Breaking Changes
-
-### Features
-
 ### Bug Fixes and Improvements
-
-### Other Changes
--->
+- If a tree environment renders without an item defined as focused in its `viewState` parameter, it will invoke the `onFocusItem`
+  prop with the first item in the tree during its render. In the past, this was implicitly and silently set in the `viewState` prop,
+  now this assignment is triggered explicitly with the handler call (#363)

packages/core/src/controlledEnvironment/ControlledTreeEnvironment.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useContext } from 'react';
+import { useContext, useEffect } from 'react';
 import {
   ControlledTreeEnvironmentProps,
   TreeEnvironmentContextProps,
@@ -21,26 +21,24 @@ export const ControlledTreeEnvironment = React.forwardRef<
 >((props, ref) => {
   const environmentContextProps = useControlledTreeEnvironmentProps(props);
 
-  const { viewState } = props;
+  const { viewState, onFocusItem } = props;
 
   // Make sure that every tree view state has a focused item
-  for (const treeId of Object.keys(environmentContextProps.trees)) {
-    // TODO if the focus item is dragged out of the tree and is not within the expanded items
-    // TODO of that tree, the tree does not show any focus item anymore.
-    // Fix: use linear items to see if focus item is visible, and reset if not. Only refresh that
-    // information when the viewstate changes
-    if (
-      !viewState[treeId]?.focusedItem &&
-      environmentContextProps.trees[treeId]
-    ) {
-      viewState[treeId] = {
-        ...viewState[treeId],
-        focusedItem:
-          props.items[environmentContextProps.trees[treeId].rootItem]
-            ?.children?.[0],
-      };
+  useEffect(() => {
+    for (const treeId of Object.keys(environmentContextProps.trees)) {
+      const firstItemIndex =
+        props.items[environmentContextProps.trees[treeId].rootItem]
+          ?.children?.[0];
+      const firstItem = firstItemIndex && props.items[firstItemIndex];
+      if (
+        !viewState[treeId]?.focusedItem &&
+        environmentContextProps.trees[treeId] &&
+        firstItem
+      ) {
+        onFocusItem?.(firstItem, treeId, false);
+      }
     }
-  }
+  }, [environmentContextProps.trees, onFocusItem, props.items, viewState]);
 
   return (
     <TreeEnvironmentContext.Provider value={environmentContextProps}>

packages/core/src/stories/363.stories.tsx

@@ -0,0 +1,59 @@
+import { Meta } from '@storybook/react';
+import React, { useState } from 'react';
+import { longTree } from 'demodata';
+import { Tree } from '../tree/Tree';
+import { ControlledTreeEnvironment } from '../controlledEnvironment/ControlledTreeEnvironment';
+import { TreeItemIndex } from '../types';
+
+export default {
+  title: 'Core/Issue Report Reproduction',
+} as Meta;
+
+export const Issue363 = () => {
+  const [focusedItem, setFocusedItem] = useState<TreeItemIndex>();
+  const [expandedItems, setExpandedItems] = useState<TreeItemIndex[]>([]);
+  const [selectedItems, setSelectedItems] = useState<TreeItemIndex[]>([]);
+  return (
+    <ControlledTreeEnvironment<string>
+      canDragAndDrop
+      canDropOnFolder
+      canReorderItems
+      items={longTree.items}
+      getItemTitle={item => item.data}
+      onFocusItem={item => {
+        setFocusedItem(item.index);
+        console.log(`Focused item: ${item.index}`);
+      }}
+      onSelectItems={items => {
+        setSelectedItems(items);
+      }}
+      onExpandItem={item => {
+        setExpandedItems([...expandedItems, item.index]);
+      }}
+      onCollapseItem={item => {
+        setExpandedItems(expandedItems.filter(i => i !== item.index));
+      }}
+      viewState={{
+        'tree-1': {
+          focusedItem,
+          expandedItems,
+          selectedItems,
+        },
+      }}
+    >
+      <button type="button">Focusable element</button>
+      <Tree treeId="tree-1" rootItem="root" treeLabel="Tree Example" />
+      <pre>
+        {JSON.stringify(
+          {
+            focusedItem,
+            expandedItems,
+            selectedItems,
+          },
+          null,
+          2
+        )}
+      </pre>
+    </ControlledTreeEnvironment>
+  );
+};

packages/core/test/dnd-restrictions.spec.tsx

@@ -118,7 +118,7 @@ describe('dnd restrictions', () => {
 
   describe('canDrag', () => {
     it('respects disabled value', async () => {
-      const canDrag = jest.fn(items => items[0].data !== 'aab');
+      const canDrag = jest.fn(items => items[0]?.data !== 'aab');
       const test = await new TestUtil().renderOpenTree({
         canDrag,
       });
@@ -131,7 +131,7 @@ describe('dnd restrictions', () => {
     });
 
     it('works for other item', async () => {
-      const canDrag = jest.fn(items => items[0].data !== 'aab');
+      const canDrag = jest.fn(items => items[0]?.data !== 'aab');
       const test = await new TestUtil().renderOpenTree({
         canDrag,
       });