fix: correctly notify selected

There was an attempt to fix `selected` notification in #126 but it was incomplete. This restores original cosmoz-tabs `selected` notification
Neovici · Oct 8, 2020 · 086ae7d · 086ae7d
1 parent 429c607
commit 086ae7d
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 9 deletions.
diff --git a/lib/use-tabs.js b/lib/use-tabs.js
@@ -12,9 +12,12 @@ import {
 const useTabSelectedEffect = (host, selectedTab) => {
 		useEffect(() => {
 			notifyProperty(host, 'selectedItem', selectedTab);
-			if (!selectedTab) {
+			if (selectedTab == null) {
 				return;
 			}
+			if (host.selected == null) {
+				notifyProperty(host, 'selected', selectedTab.getAttribute('name'));
+			}
 			selectedTab.toggleAttribute('is-selected', true);
 			const opts = {
 				bubbles: false,
@@ -47,10 +50,6 @@ const useTabSelectedEffect = (host, selectedTab) => {
 
 		useTabSelectedEffect(host, selectedTab);
 
-		useEffect(() => {
-			notifyProperty(host, 'selected', selection);
-		}, []);
-
 		useEffect(() => {
 			const onTabAlter = e => {
 				e.stopPropagation();

diff --git a/test/cosmoz-tabs-basic.test.js b/test/cosmoz-tabs-basic.test.js
@@ -24,7 +24,7 @@ suite('cosmoz-tabs', () => {
 	});
 
 	test('selects an item', async () => {
-		assert.equal(tabs.selected, undefined);
+		assert.equal(tabs.selected, 'tab0');
 		assert.equal(tabs.querySelector('[is-selected]').getAttribute('name'), 'tab0');
 
 		tabs.selected = 'tab1';
@@ -180,7 +180,7 @@ suite('cosmoz-tabs', () => {
 		hiddenTab.hidden = false;
 		await nextFrame();
 
-		assert.equal(tabs.querySelector('[is-selected]'), hiddenTab);
+		assert.equal(tabs.querySelector('[is-selected]').getAttribute('name'), hiddenTab.getAttribute('name'));
 	});
 
 	test('enabling a fallback disabled tab selects	it', async () => {

diff --git a/test/cosmoz-tabs-sizing.test.js b/test/cosmoz-tabs-sizing.test.js
@@ -73,7 +73,7 @@ suite('cosmoz-tabs sizing', () => {
 
 	test('explicitly sized tabs and flex list updates size and renders only a few items upon selection', async () => {
 		const tabs = await fixture(html`
-				<cosmoz-tabs style="height: 400px" fallback-selection>
+				<cosmoz-tabs style="height: 400px">
 					<cosmoz-tab name="tab0" heading="Flex">
 						<iron-list id="x-list" style="flex: 1 1 0.00000001px;">
 							<template>
@@ -96,7 +96,6 @@ suite('cosmoz-tabs sizing', () => {
 			`),
 			list = tabs.querySelector('iron-list');
 
-		assert.isUndefined(tabs.selected);
 		list.items = Array.from(Array(500).keys());
 
 		tabs.selected = 'tab0';