✨(frontend) fix tree keyboard toggle when children not yet loaded

[Ovgodd]

Purpose

Fix tree node lazy-loading behavior when toggling via keyboard.
Previously, children loaded only if the node had already been expanded via mouse.

Proposal

• Ensure useLoadChildrenOnOpen triggers fetch on first keyboard toggle
• Prevent multiple fetches with hasLoadedRef

[github-actions]

Size Change: +27 B (0%)

Total Size: 3.66 MB

Filename	Size	Change
apps/impress/out/_next/static/c3323b88/_buildManifest.js	0 B	-889 B (removed)	🏆
apps/impress/out/_next/static/d6e74915/_buildManifest.js	887 B	+887 B (new file)	🆕

_{compressed-size-action}

[AntoLC]

I think it is better to do the fix in the ui-kit repository as it will benefit for all: https://github.com/suitenumerique/ui-kit/

The problem comes from TreeViewItem component and how handleLoadChildren is loaded.
https://github.com/suitenumerique/ui-kit/blob/b93531e51a2c74527cd0773cb01292cb9a07be3d/src/components/tree-view/TreeViewItem.tsx#L131-L139

The onClick on the arrow should not trigger handleClick but set the node to open:

onClick={(e) => {
   e.stopPropagation();
   node.toggle();
 }}

We should then have a useEffect listening node.isOpen, when isOpen is at true, we trigger handleLoadChildren if not already done. By doing so, it will fix this issue, because the useEffect will be trigger when toggling with the keyboard.

Something like that:

useEffect(() => {
    if (isLeaf || hasLoadedChildren || node.data.value.hasLoadedChildren) {
      return;
    }

    setIsLoading(true);
    context?.treeData.handleLoadChildren(node.data.value.id).then(() =>
    setIsLoading(false));
  }, [node.isOpen]);

[Ovgodd]

I think it is better to do the fix in the ui-kit repository as it will benefit for all: https://github.com/suitenumerique/ui-kit/

The problem comes from TreeViewItem component and how handleLoadChildren is loaded. https://github.com/suitenumerique/ui-kit/blob/b93531e51a2c74527cd0773cb01292cb9a07be3d/src/components/tree-view/TreeViewItem.tsx#L131-L139

The onClick on the arrow should not trigger handleClick but set the node to open:

onClick={(e) => {
   e.stopPropagation();
   node.toggle();
 }}

We should then have a useEffect listening node.isOpen, when isOpen is at true, we trigger handleLoadChildren if not already done. By doing so, it will fix this issue, because the useEffect will be trigger when toggling with the keyboard.

Something like that:

useEffect(() => {
    if (isLeaf || hasLoadedChildren || node.data.value.hasLoadedChildren) {
      return;
    }

    setIsLoading(true);
    context?.treeData.handleLoadChildren(node.data.value.id).then(() =>
    setIsLoading(false));
  }, [node.isOpen]);

Ok I agree yes. Thanks for the detailed explanation !

[Ovgodd]

I’m closing this PR because the fix has been handled directly in the UI Kit.
This way, all applications using the UI Kit will benefit from it: #115
.