fix: Mouse click on FluentMultiSplitter bar changes position

[emetrix]

🐛 Bug Report

When I do a left (mouse) click on the resize bar of a two pane FluentMultiSplitter the resize bar changes its position.

💻 Repro or Code Sample

MainLayout.razor:

<FluentLayout>
    <FluentHeader>
        BlazorApp
    </FluentHeader>
        <FluentStack Class="main" Orientation="Microsoft.FluentUI.AspNetCore.Components.Orientation.Horizontal" Width="100%">
            <FluentMultiSplitter BarSize="8px">

                <FluentMultiSplitterPane Size="250px" Resizable="true">
                  <NavMenu /> 
                </FluentMultiSplitterPane>

                <FluentMultiSplitterPane >
                    <FluentBodyContent Class="body-content">
                        <div class="content">
                            @Body
                        </div>
                    </FluentBodyContent>
                </FluentMultiSplitterPane>

            </FluentMultiSplitter>
        </FluentStack>
    <FluentFooter>
        <a href="https://www.fluentui-blazor.net" target="_blank">Documentation and demos</a>
        <FluentSpacer />
        <a href="https://learn.microsoft.com/en-us/aspnet/core/blazor" target="_blank">About Blazor</a>
    </FluentFooter>
</FluentLayout>

🤔 Expected Behavior

A mouse click on the resize bar should not change its position

😯 Current Behavior

see bug report description

💁 Possible Solution

🔦 Context

FluentMultiSplitter-Bar.mp4

🌍 Your Environment

• OS: Windows 11 & Device: PC
• Browser: Microsoft Edge
• .NET 8.0.6 and Fluent UI Blazor library Version 4.8.0

[dvoituron]

Will be fixed in the next Release with #2218 (a condition added to FluentMultiSplitter.razor.js)