To demonstrate the problem, I will use an example of a splitter.
Just open RadzenSplitterBlazor Splitter Component | Free UI Components by Radzen
Enable Edit Source and replace the first RadzenSplitter with the one below, still with two panels:
<RadzenSplitter Collapse=@OnCollapse Expand=@OnExpand>
<RadzenSplitterPane Size="50%" Min="30%">
Pane A1
<div style="font-size: 10px;">
50% Min 30%
</div>
</RadzenSplitterPane>
<RadzenSplitterPane Min="10%">
Pane A2
<div style="font-size: 10px;">
Min 10%
</div>
</RadzenSplitterPane>
</RadzenSplitter>
You can check it, but there is nothing unusual in this example.
- Then expand the panel on the right (for example). The left panel will expand as expected.
- The splicer only shows the collapse button. So far everything is fine.
- Use the mouse pointer to close the panel again, but with a specific slide - normally the user clicks on a button with a more or less strong mouse movement. If the mouse movement is careless enough, instead of the expected restoration of the layout of the panels, the splitter bar is “caught” at the point where the mouse movement ends (mouse up).
When troubleshooting this behavior, I have encoured two problems.
- The first one: during the expanding/collapsing RadzenSplitter starts the resize operation, which should not happen.
- The second one: the resize operation breaks the requested constraints of the layout e.g. Min is completly ignored.
In this unpredictable scenario, the end user is somewhat confused as he loses control over the seemingly simple behaviour of the interface. For example, when trying to change the position of the splitterbar located in the wrong position, the splitter immediately reverts to its minimum position.
Side note:
debugging the component I saw the possibility to suppress resize while expand/collapse is "ongoing", but the second problem complicates the case: implemented recovery mechanism does not support this case well.
I would value providing a solution to this problem.