fix: Splitter-pane sizing stops randomly and pushes other pane away in FluentMultiSplitter

[lilDuckuling]

🐛 Bug Report

I've been dragging the splitter bar around and noticed that on some drags the pane doesn't expand fully to the next pane and even pushes the next pane away (see video). When clicking away and dragging again, the splitter works again as expected. Not sure when and why this bug occurs, since the drag movement where the bug occurs hasn't been executed differently from the working drag movement.

splitter_issue.mp4

💻 Repro or Code Sample

Razor page:

<FluentMultiSplitter>
  <FluentMultiSplitterPane Class="d-flex flex-column right-side" Size="70%" Min="10%" Style="background-color: #f0f0f0;">
    <FluentMultiSplitter Orientation="Microsoft.FluentUI.AspNetCore.Components.Orientation.Vertical" Style="--fluent-multi-splitter-background-color: #f0f0f0">
        <FluentMultiSplitterPane Class="d-flex" Min="12%" Size="13%" Max="85%" Collapsible="true">
            <div style="width: 100%; height: 100%">
                <FluentMultiSplitter Style="--fluent-multi-splitter-background-color: #f0f0f0">
                    <FluentMultiSplitterPane Style="background-color: white; overflow-y:auto" Size="99%">
                        <table class="pane-content">
                            <tr>
                            <th class="wrap-char" style="background-color: #dcdcdc; font-weight: normal; vertical-align: central;">Patient</th>
                            <td class="ps-2 pt-0" style="color: blue; font-size: 1.5rem">
                                <span style="background-color: pink;">TEST</span> test, <span style="font-size: 0.9rem;">date</span> info
                                </td>
                            </tr>
                            <tr>
                            <th class="wrap-char" style="background-color: #dcdcdc; font-weight: normal; vertical-align: text-top;">address</th>
                                <td class="ps-2">
                                test street
                                </td>
                            </tr>
                            <tr>
                            <th class="wrap-char" style="background-color: #dcdcdc; font-weight: normal; vertical-align: text-top;">title</th>
                                <td class="ps-2">
                                <span style="background-color: #ffffb7">content</span> <span style="background-color: pink">content</span>
                                </td>
                            </tr>
                        </table>
                    </FluentMultiSplitterPane>
                    <FluentMultiSplitterPane Style="background-color: white; overflow-y:auto" Size="1%">
                        <div class="pane-content"></div>
                    </FluentMultiSplitterPane>
                </FluentMultiSplitter>
            </div>
        </FluentMultiSplitterPane>
        <FluentMultiSplitterPane Class="d-flex" Style="background-color: #f0f0f0" Size="30%" Max="73%" Collapsible="true">
            <div style="width: 100%; height: 100%">
                <FluentMultiSplitter Style="--fluent-multi-splitter-background-color: #f0f0f0">
                    <FluentMultiSplitterPane Style="background-color: white; overflow-y:auto;" Size="70%">
                        <table class="pane-content">
                            <tr>
                            <th class="pe-4" style="background-color: #dcdcdc; font-weight: normal; vertical-align: text-top;">title</th>
                                <td class="ps-2">
                                    content
                                </td>
                            </tr>
                        </table>
                    </FluentMultiSplitterPane>
                    <FluentMultiSplitterPane Style="background-color: white; overflow-y:auto;" Size="30%">
                        <table class="pane-content">
                            <tr>
                                <th class="pe-2" style="background-color: lightcyan; font-weight: normal; border-color: white; border-bottom-width: 1px; vertical-align: text-top;">title</th>
                                <td class="ps-2">
                                    content
                                </td>
                            </tr>
                            <tr>
                                <th class="pe-2" style="background-color: lightcyan; font-weight: normal; border-color: white; border-bottom-width: 1px; vertical-align: text-top;">title</th>
                                <td class="ps-2">
                                    content
                                </td>
                            </tr>
                        </table>
                    </FluentMultiSplitterPane>
                </FluentMultiSplitter>
            </div>
        </FluentMultiSplitterPane>
    
        <FluentMultiSplitterPane Id="mainGridContainer" Class="d-flex flex-column" Min="15%" Size="57%" Style="min-height: 15%;">
            <div class="d-flex btn-group-sm text-small ps-1 mb-1 flex-shrink-0" style="background-color: #f0f0f0; white-space: nowrap;" role="group" >
                <button type="button">!</button>
                <button type="button">01.2022</button>
                <button type="button">
                    08.2022
                </button>
            </div>
           <div>C1FlexGrid</div>
            <div class="d-flex ps-1 pt-1 pb-1 text-small align-items-center flex-shrink-0 default-font" style="position: relative; bottom: 0; background-color: #f0f0f0; min-height: 2%; overflow-x:auto">
                <div class="pe-0 ps-0 flex-shrink-0" style="width: 8rem;">
                    <InputDate id="inputDate" @bind-Value="inputDate" Type="InputDateType.Date"></InputDate> 
                </div>
                <div class="ps-0 pe-0 flex-shrink-0" style="width: 4rem">
                    <label for="enter" class="col-form-label text-end" style="width: 100%">Enter:</label>
                </div>
                <div class="ps-1 pe-0 flex-shrink-0" style="width: 2rem;">
                    <InputText class="form-control p-0" style="width: 100%"id="enter" @bind-Value="inputText"></InputText>
                </div>
                <div class="ps-1 pe-0 flex-shrink-0" style="width: 9rem;">
                    <InputText class="form-control p-0" style=" width: 100%" @bind-Value ="inputText"></InputText>
                </div>
                <div class="d-flex ps-1 btn-group-sm flex-shrink-0" role="group">
                    <button type="button">X</button>
                    <button type="button">?</button>
                    <button type="button">P</button>
                    <button type="button">all</button>
                    <button type="button">1</button>
                    <button type="button">2</button>
                    <button type="button">3</button>
                    <button type="button">4</button>
                    <button type="button">5</button>
                    <button type="button">6</button>
                    <button type="button">btn</button>
                    <button type="button">btn</button>
                    <button type="button">btn</button>
                    <button type="button">btn</button>
                </div>
            </div>
        </FluentMultiSplitterPane>
    </FluentMultiSplitter>
  </FluentMultiSplitterPane>
</FluentMultiSplitter>

scoped css:

button {
    background-color: #f0f0f0;
    border-color: white;
    border-style: solid;
    box-shadow: none;
}
    button:hover, .btn-no-border:hover {
        border-color: dodgerblue;
        border-style: solid;
    }
button:focus {
    background-color: #b9d1ea;
}
button:disabled{
    border-color: white;
}
.text-small {
    font-size: small;
}
.right-side *{
    font-family: Consolas;
}
.default-font * {
    font-family: Arial, Helvetica, sans-serif;
}
td, .wrap-char {
    word-wrap: anywhere;
}

code behind:

        private string inputText = "";
        private DateTime inputDate { get; set; } = DateTime.Today;

🤔 Expected Behavior

The splitter bar (with the pane) should be able to expand everytime until the next pane is reached and not push the pane away or jump around randomly.

😯 Current Behavior

On some drags (exact circumstances of this behaviour are unknown to me) the splitter doesn't expand until the next pane is reached and even pushes the next pane away. (see video)

💁 Possible Solution

Maybe a wrong mouse y-coordinate or pane size is registered and therefore the calculations are off?

🔦 Context

🌍 Your Environment

• OS & Device: Windows 11 PC
• Browser: Google Chrome
• .NET and Fluent UI Blazor library Version: .NET 8.0, Fluent UI v4.13.2

[MarvinKlein1508]

This must be something in your code. It isn't happening for me. It only happens for me when this CSS from you is active:

td, .wrap-char {
   word-wrap: anywhere;
}

[lilDuckuling]

This must be something in your code. It isn't happening for me. It only happens for me when this CSS from you is active:

td, .wrap-char {
word-wrap: anywhere;
}

I removed the css, but the issue still persists:

splitter_issue2.mp4

[MarvinKlein1508]

Have you cleared you cache as well? Do you have the same behaviour on our demos as well?
https://www.fluentui-blazor.net/MultiSplitter

Can you upload a custom repository to reproduce this behaviour?

[lilDuckuling]

Cleared the caches, still persists.
And the issue is in the demo aswell:

splitter_issue3.mp4

Repo with Sample Code

[lilDuckuling]

For reference, here are some things I've tried so far with my sample code (without success):

• Removing Min, Max, Size Properties
• Removing the nested Splitters (that wrap each table)
• Using edge browser

[vnbaaij]

It could be me but what exactly is the issue and what is the consequence of the issue happening? Is it that sometimes a drag does not fully extend the resized pane to completely hide/cover another pane?
If so, then I don't really consider that as a high priority thing. The component is not really meant to as a way to hide things. It is merely a way to give an end users some control over information density.
The cause probably lies in how the JavaScript part receives the dragstart coordinates and ten does the calculations based on those coordinates.

[lilDuckuling]

The issue is that the next pane gets pushed away, even beneath its set Min value. This means the bar could be dragged until it's hidden and the user won't be able to drag it back. Sure, a page refresh would set the bars back, but it's simply not a nice UX.

[vnbaaij]

We'll investigate after we're done with the v5 work.