Data propagation with two-way data binding

Question

I have a popup component that wraps a popup base component that wraps DxPopup (DevExpress). With two-way databinding, I would expect the property values to not only go from parent to child, but child to parent as well. Is that expectation wrong? Here is my code:

PopupBase.razor

@using DevExpress.Blazor

<DxPopup @bind-Visible="Visible">
</DxPopup>

@code {
    [Parameter]
    public bool Visible { get; set; }

    [Parameter]
    public EventCallback<bool> VisibleChanged { get; set; }

}

DetailPopup.razor

<PopupBase @bind-Visible="Visible">

</PopupBase>

@code {
    [Parameter]
    public bool Visible { get; set; }

    [Parameter]
    public EventCallback<bool> VisibleChanged { get; set; }
}

Page.razor

<DxButton Text="Show Popup" Click="@ShowPopup" />

<DetailPopup @bind-Visible="showPopup" />

@code {
    bool showPopup = false;

    void ShowPopup()
    {
        showPopup = true;
    }
}

@bind-Visible should enable two-way binding and automatically use VisibleChanged events to push the parameter values up to the parents, right? Or no? So, should the parameters in the parents be automatically updated? Or do I need to switch to @bind-Visible:get/set to accomplish what I want. But even with that, I read that we shouldn't overwrite parameter values, so that leaves me at a loss as well.

The problem is that if the visibility is not set right, then we can end up with multiple popups on the screen (from different components).

Answer 1

Two-way binding doesn't automatically use VisibleChanged events to push the parameter values up to the parents. When change the value inside the child, at the same time, you need to manually invoke the event to pass the event(with parameter value) to parent .

PopupBase.razor

<DxPopup @bind-Visible="Visible">
    <sapn>Content inside popup</sapn>
    <DxButton Text="Change Visible inside popup" Click="ChangeVisible_and_TriggerEvent" />
</DxPopup>


@code {
    [Parameter]
    public bool Visible { get; set; }

    [Parameter]
    public EventCallback<bool> VisibleChanged { get; set; }

    private async Task ChangeVisible_and_TriggerEvent()
    {
        Visible = !Visible;
        await VisibleChanged.InvokeAsync(Visible);
    }
}