We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Toolbar Template Disappear when mutate a item

Hello Team,


I want to change the class of a toolbar item, but when doing so, the template components between them disappear, is there a solution for this problem?


example of the problem:

https://stackblitz.com/edit/react-vppcqk?file=src%2FApp.js


Regards.


6 Replies 1 reply marked as answer

SR Swathi Ravi Syncfusion Team January 13, 2023 03:05 PM UTC

Hi Jean,


We confirmed your reported problem “Toolbar template disappear when click the toolbar item” as a bug and logged the defect report. The fix for this defect will be included in our upcoming weekly patch release, which is expected to be rolled out by end of January 2023. You can track the status of the fix at the following link:


Feedback : https://www.syncfusion.com/feedback/40388/toolbar-template-disappear-when-click-the-toolbar-item


Disclaimer: Inclusion of this solution in the weekly release
may change due to other factors including but not limited to QA checks and works reprioritization.


Regards,

Swathi Ravi



JC Jean Caiza replied to Swathi Ravi January 18, 2023 02:52 PM UTC

Hello,


Any news about this bug?, Is there any alternative solution to apply?


regards



RV Ravikumar Venkatesan Syncfusion Team January 19, 2023 06:15 PM UTC

Jean,


Sample: https://stackblitz.com/edit/ej2-react-toolbar-highlight-active-toolbar-item?file=src%2Fstyle.css


As we said earlier, the fix for the issue is scheduled for a weekly patch release, which is expected to be rolled out by the end of January 2023. We will let you know once the fix for the issue is included. You can highlight the active toolbar item by using the :active and :focus CSS selectors, as shown in the below code snippet.


[style.css]

.e-toolbar-item .e-tbar-btn:active,

.e-toolbar-item .e-tbar-btn:focus {

  background-colorred;

}

 

.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn:focus .e-tbar-btn-text,

.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn:active .e-tbar-btn-text {

  colorwhite;

}



JC Jean Caiza January 19, 2023 07:11 PM UTC

Thanks for reply,


it works, but when is on blur, applied styles are removed and it is not maintainable.


I guess I'll wait until the update.


Regards!



RV Ravikumar Venkatesan Syncfusion Team January 20, 2023 12:16 PM UTC

Jean,


We will let you know once the fix for the issue is included.



RV Ravikumar Venkatesan Syncfusion Team February 8, 2023 06:12 PM UTC

Jean, The fix for the issue “Toolbar template disappear when click the toolbar item” has been included in our weekly release 20.4.49. Upgrade to the latest version to resolve the issue.


Sample: https://stackblitz.com/edit/ej2-react-toolbar-template-sample?file=src%2FApp.js

Release notes: https://ej2.syncfusion.com/react/documentation/release-notes/20.4.49/?type=all#toolbar


Marked as answer
Loader.
Live Chat Icon For mobile
Up arrow icon