Merge pull request #127 from Neovici/feature/no-resize

fix: add no-resize option in cosmoz-tabs
Neovici · Oct 1, 2020 · 0eef7b2 · 0eef7b2
2 parents efe6e18 + 4b6650e
commit 0eef7b2
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 2 deletions.
diff --git a/cosmoz-tabs.js b/cosmoz-tabs.js
@@ -46,5 +46,5 @@ const Tabs = host => {
 };
 
 customElements.define('cosmoz-tabs', component(Tabs, {
-	observedAttributes: ['selected', 'hash-param']
+	observedAttributes: ['selected', 'hash-param', 'no-resize']
 }));
diff --git a/lib/use-tabs.js b/lib/use-tabs.js
@@ -26,7 +26,9 @@ const useTabSelectedEffect = (host, selectedTab) => {
 			}
 
 			selectedTab.dispatchEvent(new CustomEvent('tab-select', opts));
-			requestAnimationFrame(() => window.dispatchEvent(new Event('resize')));
+			if (!host.noResize) {
+				requestAnimationFrame(() => window.dispatchEvent(new Event('resize')));
+			}
 			return () => {
 				selectedTab.toggleAttribute('is-selected', false);
 			};

diff --git a/test/cosmoz-tabs-basic.test.js b/test/cosmoz-tabs-basic.test.js
@@ -1,6 +1,7 @@
 import {
 	assert, html, fixture, nextFrame
 } from '@open-wc/testing';
+import { spy } from 'sinon';
 
 import '../cosmoz-tabs.js';
 
@@ -31,6 +32,19 @@ suite('cosmoz-tabs', () => {
 		assert.equal(tabs.querySelector('[is-selected]').getAttribute('name'), 'tab1');
 	});
 
+	test('does not resize on select', async () => {
+		tabs.toggleAttribute('no-resize', true);
+		await nextFrame();
+
+		const resizeSpy = spy();
+		window.addEventListener('resize', resizeSpy);
+
+		tabs.selected = 'tab1';
+		await nextFrame();
+		window.removeEventListener('resize', resizeSpy);
+		assert.isTrue(resizeSpy.notCalled);
+	});
+
 	test('contains a tablist with the same number of tabs', () => {
 		assert.lengthOf(tabs.shadowRoot.querySelectorAll('[role=tab]'), tabs.querySelectorAll('cosmoz-tab').length);
 	});