[TreeView] strange behavior when mixing controlled states and "Shift" multiselection

[stephzero1]

Search keywords

treeview multiselection controlled shfit selection

Latest version

• I have tested the latest version

Affected products

Tree View

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/broken-tree-view-v6pc5w?file=%2Fsrc%2FDemo.js

Steps:

1. SimpleTreeView (but i think is the same with RichTreeView)
2. First select with mouse or other input one item
3. Then imperatively command a selection of one and only one specific item
4. Press "Shift" for multi selection and select one other entry (so command a selection from the previously controlled selected items to the new selected one)
5. Weird

Current behavior

Screencast.From.2024-11-08.12-47-17.webm

Expected behavior

Screencast.From.2024-11-08.12-49-10.webm

Context

No response

Your environment

npx @mui/envinfo

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

Order ID or Support key 💳 (optional)

No response

[michelengelen]

Seems like the focus is saved where the mouseclick was last registered.
I'll have a look on monday! 👍🏼

[stephzero1]

Seems like the focus is saved where the mouseclick was last registered. I'll have a look on monday! 👍🏼

yea i noticed now, thank you!

[michelengelen]

Haven't found a good enough solution to this.
There is basically a discrepancy between selection via mouse and programmatic selection ... I have asked @noraleonte to check as well.

[noraleonte]

Hey @stephzero1 👋
In your example, the handleselectClick does not trigger the methods that internally handle selection, it just changes the state that you created. That's why multi selection doesn't work correctly. In order to imperatively select an item, you can use the Tree View's imperative API. Here's an updated demo for how to do that and you can read more about this API in this section from the docs. Let me know if this helps 💪