search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
3.95k stars 1.21k forks source link

[Tree View] SimpleTreeView keyboard navigation is broken with React 17 #13399

Open dominic-adams opened 1 month ago

dominic-adams commented 1 month ago

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/strange-neumann-nxpf6r

Steps:

  1. Setup environment with React 17 and @mui/x-tree-view >7.0.0 -- 7.0.0-beta.7 was the last version with working keyboard nav with React 17
  2. Using the SimpleTreeView+TreeItems, attempt to use Tab key to focus on the SimpleTreeView
  3. Tab key will skip the SimpleTreeView entirely

Current behavior

Instead of focusing on the first element like the SimpleTreeView does in React 18, and how the RichTreeView works in both React 17+18, it will just skip the TreeView entirely.

Clicking on an item first and then attempting to use keyboard nav semi-fixes the issue, but then you only use arrow keys within that parent TreeItem (e.g. not navigate to an adjacent parent TreeItem).

Expected behavior

Pressing Tab when the TreeView is the next focusable element should move focus to the first item in the TreeView as per the examples on https://mui.com/x/react-tree-view/simple-tree-view/items/ as well as how the RichTreeView works currently with React 17.

Context

Need the keyboard navigation working for React 17 project.

Your environment

npx @mui/envinfo ``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```

Search keywords: accessibility,keyboard,react17,treeview,v7

noraleonte commented 1 month ago

Hey @dominic-adams 👋 Thanks for reporting this 🎉 The issue is clear to me, but I need to look into it deeper to find the root cause. I will add this to the board to discuss with the team 🗒️