Blazorise: Modal modalRef is null

[temonk]

Hi, I am trying to use modal and followed guidlines in documentation however every time I try to load a page modalRef parameter is null and visual studio enters break mode (an exception is thrown).

 <Modal @ref="modalRef" @ref:suppressField>
        <ModalBackdrop />
        <ModalContent IsCentered="true">
            <ModalHeader>
                <ModalTitle>Add Vaccine</ModalTitle>
                <CloseButton Clicked="@HideModal" />
            </ModalHeader>
            <ModalBody>
                <VaccinatePet PetId="@petDetails.Id" Version="@petDetails.Version" VetHouseId="testId"></VaccinatePet>
            </ModalBody>
            <ModalFooter>
                <Button Color="Color.Secondary" Clicked="@HideModal">Close</Button>
                <Button Color="Color.Primary" Clicked="@HideModal">Save Changes</Button>
            </ModalFooter>
        </ModalContent>
    </Modal>

[stsrki]

Try to remove @ref:suppressField. That is old workaround for old Blazor.

[temonk]

I also tried that but it didn't work

[stsrki]

Please post full code for your page.

[temonk]

    <Button Clicked="@ShowModal"> Add Vaccine</Button>


    <Modal @ref="modalRef" >
        <ModalBackdrop />
        <ModalContent IsCentered="true">
            <ModalHeader>
                <ModalTitle>Add Vaccine</ModalTitle>
                <CloseButton Clicked="@HideModal" />
            </ModalHeader>
            <ModalBody>
               <VaccinatePet PetId="@petDetails.Id" Version="@petDetails.Version" VetHouseId="testId"></VaccinatePet>
            </ModalBody>
            <ModalFooter>
                <Button Color="Color.Secondary" Clicked="@HideModal">Close</Button>
                <Button Color="Color.Primary" Clicked="@HideModal">Save Changes</Button>
            </ModalFooter>
        </ModalContent>
    </Modal>


@code {
    private Modal modalRef;



    void HideModal()
    {
        modalRef.Hide();
    }

    void ShowModal()
    {
        modalRef.Show();
    }


}

[stsrki]

it works on my machine. Maybe you miss one of steps setting up for Blazorise.

[temonk]

Thank you.I'll go through it once again.

[MattFromGer]

I guess it's not the modalRef object which is null, but the petDetails object which throws a NullReferenceException?

[temonk]

Yes, that was the issue. I fixed it by adding ref to petDetails and everything is working. My bad I thought the issue was coming from Modal component