← All changes | modules/atomic-widgets/elements/atomic-tabs/handlers/atomic-tabs-preview-handler.js +13 -3 4.0.9 → trunk View file →

		@@ -1,7 +1,8 @@
1	1	import { register } from '@elementor/frontend-handlers';
2	2	import { Alpine, refreshTree } from '@elementor/alpinejs';
3		-import { TAB_ELEMENT_TYPE, TAB_CONTENT_ELEMENT_TYPE, getTabId, getIndex } from './utils';
	3	+import { TAB_ELEMENT_TYPE, TAB_CONTENT_ELEMENT_TYPE, getIndex } from './utils';
	4	+import { setActiveTabIndex } from './editor-tabs-state';
4	5
5	6	register( {
6	7	elementType: 'e-tabs',
7	8	id: 'e-tabs-preview-handler',
		@@ -19,12 +20,21 @@
19	20	return;
20	21	}
21	22
22	23	const targetIndex = getIndex( targetElement, type );
23		- Alpine.$data( element ).activeTab = getTabId( element.dataset.id, targetIndex );
	24	+ setActiveTabIndex( element.dataset.id, targetIndex );
24	25	}, { signal } );
25	26
26	27	// Re-initialize Alpine to sync with editor DOM manipulations that bypass Alpine's reactivity.
27	28	listenToChildren( [ TAB_ELEMENT_TYPE, TAB_CONTENT_ELEMENT_TYPE ] )
28		- .render( () => refreshTree( element ) );
	29	+ .render( ( event ) => {
	30	+ const childElement = event.detail.element;
	31	+ const nearestTabs = childElement.closest( '[data-e-type="e-tabs"]' );
	32	+
	33	+ if ( nearestTabs !== element ) {
	34	+ return;
	35	+ }
	36	+
	37	+ refreshTree( element );
	38	+ } );
29	39	},
30	40	} );