Hey all,
I ran around a weird bug when Switching between locales. The tabs work well when loading an entry in a collection that uses Tabs. But when switching to another locale using the sidebar site switcher, the names of the tabs get weirdly duplicated after the intended blueprint content. Leaving behind a trialing list of labels using the same labels as the tabs. More details below:
Steps to reproduce
- Install
statamic-tabs on a Statamic site with multisite enabled (2+ locales)
- Add tab fields to a collection blueprint
- Open an entry in the origin locale — tabs render correctly
- Switch to any other locale using the sidebar site picker
Expected behaviour
Tabs render correctly after every locale switch.
Actual behaviour
After switching locales, tab fields either:
- Show as orphaned bare label wrappers outside their tab containers (non-origin locale), or
- Disappear entirely after navigating back to origin
Potential root cause
TabFieldtype.vue relies entirely on DOM manipulation and a global $events bus in mounted() to build the tab UI. Statamic's EntryPublishForm.editLocalization() swaps entry data in-place via AJAX without destroying/recreating child components, so mounted() never re-fires on locale switch. This leaves the DOM in a broken state.
Workaround
Force a full page reload on locale selection by replacing EditLocalization with window.location = localization.url. This is a heavy-handed patch but works reliably.
Potential suggested fix
Replace the mounted() DOM manipulation approach with a reactive Vue-based implementation that re-runs correctly when parent data changes, or emit a lifecycle event that TabFieldtype can listen to in order to re-initialize.
Environment
eminos/statamic-tabs: v1.2.x (Vue 2 / Statamic 5)- Statamic: 5.x
- PHP: 8.4
P.S. This whole issue has been co-debugged with Claude. Please don't roast me, I am but a humble designer who's trying to help this fantastic addon lol. I can also share the work around if it helps anyone. Cheers!
Hey all,
I ran around a weird bug when Switching between locales. The tabs work well when loading an entry in a collection that uses Tabs. But when switching to another locale using the sidebar site switcher, the names of the tabs get weirdly duplicated after the intended blueprint content. Leaving behind a trialing list of labels using the same labels as the tabs. More details below:
Steps to reproduce
statamic-tabson a Statamic site with multisite enabled (2+ locales)Expected behaviour
Tabs render correctly after every locale switch.
Actual behaviour
After switching locales, tab fields either:
Potential root cause
TabFieldtype.vuerelies entirely on DOM manipulation and a global$eventsbus inmounted()to build the tab UI. Statamic'sEntryPublishForm.editLocalization()swaps entry data in-place via AJAX without destroying/recreating child components, somounted()never re-fires on locale switch. This leaves the DOM in a broken state.Workaround
Force a full page reload on locale selection by replacing
EditLocalizationwithwindow.location = localization.url. This is a heavy-handed patch but works reliably.Potential suggested fix
Replace the
mounted()DOM manipulation approach with a reactive Vue-based implementation that re-runs correctly when parent data changes, or emit a lifecycle event thatTabFieldtypecan listen to in order to re-initialize.Environment
eminos/statamic-tabs: v1.2.x (Vue 2 / Statamic 5)P.S. This whole issue has been co-debugged with Claude. Please don't roast me, I am but a humble designer who's trying to help this fantastic addon lol. I can also share the work around if it helps anyone. Cheers!