Hello @syiroth

The issue occurs on the Customer Order Detail page because the Vue-based tab component (Information, Invoices, Shipments, Refunds) fails to initialize when it encounters invalid characters in dynamic data. This usually happens if special symbols such as ™, #, /, &, smart quotes, emojis, or HTML are used in shipping method names, payment method titles, order statuses, addresses, or translation strings. These values are converted into DOM attributes/IDs, and invalid characters trigger the “DOMException: String contains an invalid character” error, which stops the tab switching functionality. To fix it, remove special characters from shipping/payment/status titles and translations, clear Laravel caches (php artisan optimize:clear), rebuild frontend assets (npm run build after deleting public/build), and hard refresh the browser. Note: Make sure you perform these steps on a staging environment first, not directly on production.

Regards
Rishabh Yogi
Team Bagisto