TreeView: Add Public Select Method and Disable Text Selection When ExpandOnDoubleClick is true

[mckaragoz]

Description

The issue described into #5853.

This PR does not make big changes or breaking changes about the issue. Only add a public method that now developers can safely and properly control the selected styles.

This video shows that changing @bind-SelectedValue only changes the value, not the style. And the new SelectItem method (Buttons have "Update" text) changes both value and style.

20221126_185014.mp4

And as the second change, disabled the text select with CSS when double click is true, because when we didn't disable text selection, the text selects with double click on each expand.

How Has This Been Tested?

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist:

• The PR is submitted to the correct branch (dev).
• My code follows the code style of this project.
• I've added relevant tests.

[codecov]

Codecov Report

Base: 91.61% // Head: 91.49% // Decreases project coverage by -0.11% ⚠️

Coverage data is based on head (a462c87) compared to base (b3e19da).
Patch coverage: 100.00% of modified lines in pull request are covered.

Additional details and impacted files

@@            Coverage Diff             @@
##              dev    #5856      +/-   ##
==========================================
- Coverage   91.61%   91.49%   -0.12%     
==========================================
  Files         381      381              
  Lines       14892    14948      +56     
==========================================
+ Hits        13643    13677      +34     
- Misses       1249     1271      +22     

Impacted Files	Coverage Δ
...MudBlazor/Components/TreeView/MudTreeView.razor.cs	100.00% <100.00%> (ø)
...lazor/Components/TreeView/MudTreeViewItem.razor.cs	98.11% <100.00%> (+0.01%)	⬆️
src/MudBlazor/Services/IIJSRuntimeExtentions.cs	70.58% <0.00%> (-29.42%)	⬇️
src/MudBlazor/Extensions/TaskExtensions.cs	28.57% <0.00%> (-26.99%)	⬇️
src/MudBlazor/Services/DialogService.cs	86.86% <0.00%> (-3.50%)	⬇️
src/MudBlazor/Components/Link/MudLink.razor.cs	100.00% <0.00%> (ø)
src/MudBlazor/Components/Mask/MudMask.razor.cs	94.90% <0.00%> (ø)
src/MudBlazor/Components/Chart/Parts/Legend.razor	100.00% <0.00%> (ø)
src/MudBlazor/Components/Dialog/DialogReference.cs	77.77% <0.00%> (ø)
...c/MudBlazor/Components/Snackbar/SnackbarMessage.cs	100.00% <0.00%> (ø)
... and 9 more

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

[mikes-gh]

I read the issue, I read the PR and I don't understand the problem or the solution.

[mckaragoz]

Hmm, how can i explain. There are actually more than one issue.

First of all SelectedValue parameter is missing in MudTreeView. Somehow it works, probably compiler accepts only SelectedValueChanged event callback.

Because of there is no SelectedValue, there is also no change to run some methods when SelectedValue changed. The upper video shows that when you change SelectedValue programmatically (Clicked on Select Item1 and Select Item2 buttons), only value changes, styles will be the same (the blue overlay remains on the old value). Because the style only changes when we click to the treeview item, i think its a design fault.

So we didn't fix or discuss all, because it will going to a bigger PR. Actually i need a quick way, so added a general and changeable public method that can be use for different situations.

[henon]

Long story short, the PR enables users to programmatically select entries in the TreeView which was previously only possible per click on the entry.

[mikes-gh]

Hmm this wouldn't this be best done by parameters. Public methods are rarely a good choice in Blazor. Plus theres no xml docs and theres a requirement to take a ref to the item and the tree. Sounds like a hack to me.

[henon]

I agree, a public T SelectedValue parameter where you can select the item with its value would be better. And if there are multiple items in question select the first that matches.

[mckaragoz]

If you have other solution about the issue i will be appreciated 🙂 We use this this like methods also in datepicker named GoToDate. In some situations, we have to use public methods to achieve some results. Because our design is not ready for all conditions. When we achieve a rock solid design with only parameters, surely we can remove the public methods, but i think its not possible for now.

We can accept these public methods as "secondary" design options. Because there always may be breaks due to some commits, and these like of public methods also helps us to build workarounds etc.

For this issue, adding SelectedValue parameter is a really big work, we also need to add SelectedItem then, need to arrange multiselection etc. May takes months.

[mckaragoz]

By the way this PR fixes #1511 and #4492 and #4536 and #5704. @henon @mikes-gh they all like similar, but surely points a good design thing.

[henon]

#4492 is not fixed by this. Only if you implement public T SelectedValue. A test case would be this snippet: https://try.mudblazor.com/snippet/ckGQvlQMeayRtVKV

it shows the same tree twice, bound to the same variable. Selecting an item in any of the two trees should select it in the other too.

[mckaragoz]

#4492 is not fixed by this. Only if you implement public T SelectedValue. A test case would be this snippet: https://try.mudblazor.com/snippet/ckGQvlQMeayRtVKV

it shows the same tree twice, bound to the same variable. Selecting an item in any of the two trees should select it in the other too.

Yes i didn't close them as solved, but now at least there is some programmatic way to workaround.