diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.ts index 63f51c998778..7f579a85adf9 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.ts +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.ts @@ -7,6 +7,7 @@ import { UseTreeViewFocusSignature } from './useTreeViewFocus.types'; import { useInstanceEventHandler } from '../../hooks/useInstanceEventHandler'; import { getActiveElement } from '../../utils/utils'; import { getFirstNavigableItem } from '../../utils/tree'; +import { MuiCancellableEvent } from '../../models/MuiCancellableEvent'; const useTabbableItemId = ( instance: TreeViewUsedInstance, @@ -128,9 +129,14 @@ export const useTreeViewFocus: TreeViewPlugin = ({ } }); - const createHandleFocus = - (otherHandlers: EventHandlers) => (event: React.FocusEvent) => { + const createRootHandleFocus = + (otherHandlers: EventHandlers) => + (event: React.FocusEvent & MuiCancellableEvent) => { otherHandlers.onFocus?.(event); + if (event.defaultMuiPrevented) { + return; + } + // if the event bubbled (which is React specific) we don't want to steal focus if (event.target === event.currentTarget) { instance.focusDefaultItem(event); @@ -144,7 +150,7 @@ export const useTreeViewFocus: TreeViewPlugin = ({ return { getRootProps: (otherHandlers) => ({ - onFocus: createHandleFocus(otherHandlers), + onFocus: createRootHandleFocus(otherHandlers), 'aria-activedescendant': activeDescendant ?? undefined, }), publicAPI: { diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.tsx b/packages/x-tree-view/src/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.tsx index 5b2775a94cfc..e28b703fbed8 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.tsx +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.tsx @@ -110,6 +110,13 @@ export const useTreeViewJSXItems: TreeViewPlugin = }; }; +const isItemExpandable = (reactChildren: React.ReactNode) => { + if (Array.isArray(reactChildren)) { + return reactChildren.length > 0 && reactChildren.some(isItemExpandable); + } + return Boolean(reactChildren); +}; + const useTreeViewJSXItemsItemPlugin: TreeViewItemPlugin = ({ props, rootRef, @@ -130,15 +137,7 @@ const useTreeViewJSXItemsItemPlugin: TreeViewItemPlugin { - if (Array.isArray(reactChildren)) { - return reactChildren.length > 0 && reactChildren.some(isExpandable); - } - return Boolean(reactChildren); - }; - - const expandable = isExpandable(children); - + const expandable = isItemExpandable(children); const pluginContentRef = React.useRef(null); const handleContentRef = useForkRef(pluginContentRef, contentRef); diff --git a/packages/x-tree-view/src/useTreeItem2/useTreeItem2.ts b/packages/x-tree-view/src/useTreeItem2/useTreeItem2.ts index b2c5ebbe8992..fe2dc1e70f76 100644 --- a/packages/x-tree-view/src/useTreeItem2/useTreeItem2.ts +++ b/packages/x-tree-view/src/useTreeItem2/useTreeItem2.ts @@ -37,7 +37,6 @@ export const useTreeItem2 = (event: React.FocusEvent & MuiCancellableEvent) => { otherHandlers.onFocus?.(event); - if (event.defaultMuiPrevented) { return; } @@ -52,7 +51,6 @@ export const useTreeItem2 = (event: React.FocusEvent & MuiCancellableEvent) => { otherHandlers.onBlur?.(event); - if (event.defaultMuiPrevented) { return; } @@ -64,7 +62,6 @@ export const useTreeItem2 = (event: React.KeyboardEvent & MuiCancellableEvent) => { otherHandlers.onKeyDown?.(event); - if (event.defaultMuiPrevented) { return; } @@ -75,7 +72,6 @@ export const useTreeItem2 = (event: React.MouseEvent & MuiCancellableEvent) => { otherHandlers.onClick?.(event); - if (event.defaultMuiPrevented) { return; } @@ -87,7 +83,6 @@ export const useTreeItem2 = (event: React.MouseEvent & MuiCancellableEvent) => { otherHandlers.onMouseDown?.(event); - if (event.defaultMuiPrevented) { return; }