Toolbar Template Disappear when mutate a item

[Jean Caiza]

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.

[Swathi Ravi]

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

[Jean Caiza]

Hello,

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

regards

[Ravikumar Venkatesan]

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-color: red;

}

 

.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 {

  color: white;

}

[Jean Caiza]

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!

[Ravikumar Venkatesan]

Jean,

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

[Ravikumar Venkatesan]

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