Blazor SfToolbar items remain selected after click with bootstrap5.css

[John]

Hi,

We are using the SfToolbar with the bootstrap5.css theme.

After you click a default ToolbarItem, it remains selected,  as shown in the attached image.

For example, if the OnClick event launches a dialog, after the dialog is hidden the ToolbarItem is displayed in hover/toggle mode (see image).

This is not standard behavior for a toolbar.

The docs suggest it is possible to customize with .e-toolbar .e-tbar-btn:focus, however:

a) What css do we use for this?

b) How do we set the css such that we can change themes dynamically?

b) Why does it retain focus after a click?

Please advise.  Thank you.

[Nevitha Ravi]

HI John, 

Greetings from Syncfusion Support. 

We are currently checking on the reported query, we will provide you the prompt solution on or before October 12,2021. 

Regards, 

Nevitha 

[Satheesh Kumar Balasubramanian]

Hi John, 

  

Thanks for your patience. 

  

We have validated your reported queries and let you know that it is not feasible to unselect the toolbar item when it is clicked by default. Selection will be removed only when we click outside the toolbar which is the current default behavior of toolbar. But, we can use the below customized styles to achieve your requirement. 

Index.razor:  

<SfToolbar CssClass="depress-class"> 

    <ToolbarItems> 

        <ToolbarItem Text="DoNothing" Type="ItemType.Button"></ToolbarItem> 

    </ToolbarItems> 

</SfToolbar> 

  

<style> 

    .e-toolbar.depress-class .e-tbar-btn:focus { 

        background: #f8f9fa; 

        box-shadow: none; 

        border: none; 

    } 

  

    .e-toolbar.depress-class .e-tbar-btn:focus .e-tbar-btn-text { 

        color: #212529; 

        padding: 4px; 

    } 

</style> 

  

We have prepared a sample to meet your requirement, which can be downloaded from the below link. 

  

https://www.syncfusion.com/downloads/support/forum/169499/ze/FocusIssue-630509621 

  

Kindly try the above sample and let us know if this meets your requirement. 

  

Regards, 

Satheesh Kumar B 

[John]

Thank you for the response  Satheesh.

1. The solution suggested works except that it hides the icon.  Could you please update to handle icons.
2. It would be good if there was an option added to support this behaviour, otherwise dynamically switching to a different theme (e.g. Light->Dark) will be much harder.

Thanks, John

[Satheesh Kumar Balasubramanian]

Hi John, 

  

Thanks for your update. 

  

Query 1: 

  

We have validated your reported query "Could you please update to handle icons" and used the below customized styles to achieve your requirement.  

  

Index.razor:   

<SfToolbar CssClass="depress-class">  

    <ToolbarItems>  

        <ToolbarItem Text="DoNothing" Type="ItemType.Button"></ToolbarItem>  

    </ToolbarItems>  

</SfToolbar>  

   

<style> 

    .e-toolbar.depress-class .e-tbar-btn:focus { 

        background: #f8f9fa; 

        box-shadow: none; 

        border: none; 

    } 

  

    .e-toolbar.depress-class .e-tbar-btn:focus .e-tbar-btn-text { 

       color: #212529; 

       padding: 4px; 

    } 

  

    .e-toolbar.depress-class .e-tbar-btn:focus .e-icons.e-btn-icon { 

       color: #6c757d; 

       padding: 4px; 

    } 

</style> 

  

https://www.syncfusion.com/downloads/support/forum/169499/ze/FocusIssue1390189217 

  

Kindly try the above sample and let us know if this meets your requirement.  

  

Query 2: 

 

We have already considered this requirement as feature request “handle depress a toolbar button” at our end which can be tracked using the following link.  

https://www.syncfusion.com/feedback/20114/control-the-depress-state-of-blazor-toolbar-button   

The feature will be included in any of our upcoming releases until then we suggest you to use the previously suggested solution. At the planning stage for every release cycle, we will review all the open features and identify features for implementation based on specific parameters including product vision, technological feasibility, and customer interest and its importance in component. Priority will be given to feature request which has maximum number of votes. So, we request you to keep track of the status through the above feedback link. 

Regards,

Satheesh Kumar B

[John]

Thanks  Satheesh,

1. That fixes the issue with the icon.
2. However, after a button is clicked, that button then does not display the correct hover state, while other buttons do.  It looks like that button is disabled.

Please advise,  thank you.

[Satheesh Kumar Balasubramanian]

Hi John, 

  

Thanks for your update. 

  

We have validated your reported query "However, after a button is clicked, that button then does not display the correct hover state, while other buttons do. " and tried to reproduce the issue at our end. But we were unable to reproduce the issue at our end. 

  

Please find the video reference which prepared for your issue - https://www.syncfusion.com/downloads/support/forum/169499/ze/FocusIssueVideo1229106754 

  

Could you please share the below details to reproduce the issue? This will help to validate the issue and provide prompt solution at earliest. 

• Whether you have used any customization styles in toolbar other than we have shared?
• Share a video demo depicting the issue
• Whether the issue reproduced in our previously shared sample?

Regards, 

Satheesh Kumar B 

[John]

Please see attached file for an example.  Thanks, John

Attachment: sftoolbarissue_a6c14f8e.zip

[John]

Please nota that the same behavior occurs in your example.  It is only when you focus on another control that the hover behavior returns.

Also, in the video you can see that the button changes size after click.

Thanks!

[Satheesh Kumar Balasubramanian]

Hi John, 

  

Thanks for your update. 

  

Query 1&2: 

  

We have validated your reported queries and used the below customized styles to achieve your requirement. 

  

Sample: https://www.syncfusion.com/downloads/support/forum/169499/ze/FocusIssue1985971562 

  

Index.razor:    

<SfToolbar CssClass="depress-class"> 

</SfToolbar> 

  

<style> 

    .e-toolbar.depress-class .e-tbar-btn:focus { 

        background: #f8f9fa; 

        box-shadow: none; 

        border: none; 

    } 

  

    .e-toolbar.depress-class .e-tbar-btn:focus .e-tbar-btn-text { 

       color: #212529; 

       padding: 4px; 

    } 

  

    .e-toolbar.depress-class .e-tbar-btn:focus .e-icons.e-btn-icon { 

       color: #6c757d; 

    } 

  

    .e-toolbar.depress-class .e-tbar-btn:hover { 

        background: #5c636a; 

        border-color: #6c757d; 

        color: #6c757d; 

    } 

    .e-toolbar.depress-class .e-tbar-btn:hover .e-icons.e-btn-icon, 

    .e-toolbar.depress-class .e-tbar-btn:hover .e-tbar-btn-text { 

        color: #fff; 

    } 

</style> 

  

Kindly try the above sample and let us know if this meets your requirement. 

  

Regards, 

Satheesh Kumar B 

[John]

This works now.  Many thanks.  If this does become a built in option, that would be great.

[Nevitha Ravi]

Hi John, 

  

We are happy that the solution worked at your end. As mentioned earlier, we have considered this request as feature already and will be implemented in any of our upcoming releases.

Regards,
Nevitha