fix(tabs): set selectedIndex only if differ from previous selectedIndex

ing-bank · Dec 1, 2023 · db96e8c · db96e8c
1 parent c3f7555
commit db96e8c
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 0 deletions.
diff --git a/.changeset/small-pumpkins-peel.md b/.changeset/small-pumpkins-peel.md
@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+fix(tabs): set selectedIndex only if value differ from previous value
diff --git a/packages/ui/components/tabs/src/LionTabs.js b/packages/ui/components/tabs/src/LionTabs.js
@@ -356,7 +356,11 @@ export class LionTabs extends LitElement {
    * @param {number} value The new index
    */
   set selectedIndex(value) {
+    if (value === this.__selectedIndex) {
+      return;
+    }
     const stale = this.__selectedIndex;
+    /** @type {number | undefined} */
     this.__selectedIndex = value;
     this.__updateSelected(false);
     this.dispatchEvent(new Event('selected-changed'));

diff --git a/packages/ui/components/tabs/test/lion-tabs.test.js b/packages/ui/components/tabs/test/lion-tabs.test.js
@@ -75,6 +75,14 @@ describe('<lion-tabs>', () => {
       expect(spy).to.have.been.calledOnce;
     });
 
+    it('does not send event "selected-changed" after selecting currently selected tab', async () => {
+      const el = /** @type {LionTabs} */ (await fixture(basicTabs));
+      const spy = sinon.spy();
+      el.addEventListener('selected-changed', spy);
+      el.selectedIndex = 0;
+      expect(spy).not.to.have.been.called;
+    });
+
     it('logs warning if unequal amount of tabs and panels', async () => {
       const stub = sinon.stub(console, 'warn');
       await fixture(html`