[Bug]: HTML body scrollbar should be hidden when opening modal

[realLiangshiwei]

Blazorise Version

1.6.2-1.7.1

What Blazorise provider are you running on?

Bootstrap5

Link to minimal reproduction or a simple code snippet

@page "/"
@using Blazorise

<Button Color="Color.Primary" Clicked="@ShowModal">Show Modal</Button>

<div style="min-height: 1500px">
    This is some placeholder content
</div>

<Modal @ref="modalRef">
    <ModalContent Centered>
        <ModalHeader>
            <ModalTitle>Employee edit</ModalTitle>
            <CloseButton />
        </ModalHeader>
        <ModalBody>
            <Field>
                <FieldLabel>Name</FieldLabel>
                <TextEdit Placeholder="Enter name..." />
            </Field>
            <Field>
                <FieldLabel>Surname</FieldLabel>
                <TextEdit Placeholder="Enter surname..." />
            </Field>
            <Field>
                <FieldLabel>Name</FieldLabel>
                <TextEdit Placeholder="Enter name..." />
            </Field>
  
    
        </ModalBody>
        <ModalFooter>
            <Button Color="Color.Secondary" Clicked="@HideModal">Close</Button>
            <Button Color="Color.Primary" Clicked="@HideModal">Save Changes</Button>
        </ModalFooter>
    </ModalContent>
</Modal>
@code{
    // reference to the modal component
    private Modal modalRef;

    private Task ShowModal()
    {
        return modalRef.Show();
    }

    private Task HideModal()
    {
        return modalRef.Hide();
    }
}

Steps to reproduce & bug description

According to the document example of Bootstrap, it will hide the scroll bar when the modal is opened.

https://getbootstrap.com/docs/5.0/components/modal/

What is expected?

Hide the HTML body scroll bar

What is actually happening?

It doesn't hide the HTML body scroll bar

What browsers do you see the problem on?

Chrome

Any additional comments?

No response

[stsrki]

@realLiangshiwei thanks for reporting this. Since we don't use any of BS5 javascript we didn't implemented this feature.

It seems that we need to some more JS logic into our Blazorise.Bootstrap5/modal.js.

@tesar-tech Look at https://github.com/twbs/bootstrap/blob/main/js/src/util/scrollbar.js, and try to bring some of that scrollbar manipulation into our modal.js, if possible.