Clicked not working as expected for Button of type Link.

[polonskyg]

Describe the bug I have a Button (ButtonType.Link) inside a Bar. The Bar has set Visible="@IsVisible" Then the button has Clicked="ToggleBar" and that method changes the value of IsVisible (a property in the component) which is not doing anything (the Bar should hide, but if I use @onclick="ToggleBar" in the button (and keep everything else the same, it works and the bar hides.

To Reproduce Removing some parts for brevity

@using BlazorPro.Spinkit
@inject NavigationManager NavigationManager

<Bar Mode="BarMode.VerticalInline"
     Breakpoint="Breakpoint.Desktop"
     Background="Blazorise.Background.White"
     Visible="@(IsVisible)">
     @*data-collapse="@(IsVisible ? "" :"hide")">*@
    <BarMenu>
        <BarStart>
            <Tabs @bind-SelectedTab="CurrentTab">
                <Items>
                    <Tab Name="Items">@Localizer.Text("title")</Tab>
                </Items>
                <Content>
                    <TabPanel Name="Items">
                        <div style="position:absolute; width:100%;">
                                <Button Type="ButtonType.Link" To="item" @onclick="ToggleBar" Style="position: relative;">
                                    <Icon Name="IconName.Add" />
                                    @Localizer.Text("Add")
                                </Button>
                        </div>
                    </TabPanel>
                </Content>
            </Tabs>
        </BarStart>
    </BarMenu>
</Bar>

@code
{
    private bool IsVisible = false;

    public void ToggleBar()
    {
        IsVisible = !IsVisible;
        StateHasChanged();
    }
}

Expected behavior When the Add button (link) is clicked the Bar should collapse (hide) and when is clicked again, the bar should be shown. It was working with Clicked and data-collapsed (commented above) in version 0.9.2.5, but after upgrading to the version 0.9.3.1 is stopped working and I had to use, in the button, @onclick="ToggleBar" instead of Clicked. The problem with this approach is that the hiding is very slow, like if it has a delay.

[stsrki]

You almost got it. Just need to use two-way binding for Visible parameter.

<Bar Mode="BarMode.VerticalInline"
        Breakpoint="Breakpoint.Desktop"
        Background="Blazorise.Background.White"
+        @bind-Visible="@IsVisible">
    <BarMenu>
        <BarStart>
            <Tabs @bind-SelectedTab="CurrentTab">
                <Items>
                    <Tab Name="Items">items</Tab>
                </Items>
                <Content>
                    <TabPanel Name="Items">
                        <div style="position:absolute; width:100%;">
                            <Button Type="ButtonType.Link" To="tests/buttons" @onclick="@ToggleBar" Style="position: relative;">
                                <Icon Name="IconName.Add" />
                                Add
                            </Button>
                        </div>
                    </TabPanel>
                </Content>
            </Tabs>
        </BarStart>
    </BarMenu>
</Bar>

@code
{
    private bool IsVisible = true;
    string CurrentTab = "Items";
    public Task ToggleBar()
    {
        IsVisible = !IsVisible;

+        return Task.CompletedTask;
    }
}

And you don't need StateHasChanged() in this case.

[polonskyg]

Well, while that might work, my point is that according to the official documentation in the page I should be using Clicked instead of on-click. Thx! Guillermo.

[stsrki]

Do you mean regarding the @onclick="@ToggleBar"? Yeah, it might not be the best decision to disable Clicked event for link buttons. The same thing was done for the Link component and recently I have enabled Clicked to work. I might do the same for the Button.

[polonskyg]

Thx for your quick response!

El jue, 18 de mar. de 2021 a la(s) 17:41, Mladen Macanović ( @.***) escribió:

Do you mean regarding the @onclick="@ToggleBar"? Yeah, it might not be the best decision to disable Clicked event for link buttons. The same thing was done for the Link component and recently I have enabled Clicked to work. I might do the same for the Button.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/stsrki/Blazorise/issues/2057#issuecomment-802281512, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB4F7G2ZMKZ2TFNOW7XZL2TTEJQRFANCNFSM4ZL2AZXQ .

-- Gracias. Ing. Guillermo.Polonsky.