diff --git a/packages/steps/src/LionStep.js b/packages/steps/src/LionStep.js
index 5b866367b..176e03c80 100644
--- a/packages/steps/src/LionStep.js
+++ b/packages/steps/src/LionStep.js
@@ -100,29 +100,11 @@ export class LionStep extends LionLitElement {
firstUpdated() {
super.firstUpdated();
this.controller = this.parentNode;
- if (this.initialStep === true) {
- this.enter(true);
- }
}
- getControllerIndex() {
- const { steps } = this.controller;
- for (let i = 0; i < steps.length; i += 1) {
- if (steps[i] === this) {
- return i;
- }
- }
- return 0;
- }
-
- enter(updateController) {
+ enter() {
this.status = 'entered';
- if (updateController === true) {
- this.controller.current = this.getControllerIndex();
- // controller will trigger enter() again which will dispatch the enter event
- } else {
- this.dispatchEvent(new CustomEvent('enter', { bubbles: true, composed: true }));
- }
+ this.dispatchEvent(new CustomEvent('enter', { bubbles: true, composed: true }));
}
leave() {
diff --git a/packages/steps/src/LionSteps.js b/packages/steps/src/LionSteps.js
index d9ef3972a..71746099e 100644
--- a/packages/steps/src/LionSteps.js
+++ b/packages/steps/src/LionSteps.js
@@ -64,6 +64,17 @@ export class LionSteps extends ObserverMixin(LionLitElement) {
firstUpdated() {
super.firstUpdated();
this._max = this.steps.length - 1;
+
+ let hasInitial = false;
+ this.steps.forEach((step, i) => {
+ if (step.initialStep && i !== 0) {
+ this.current = i;
+ hasInitial = true;
+ }
+ });
+ if (!hasInitial) {
+ this.steps[0].enter();
+ }
}
next() {
diff --git a/packages/steps/test/lion-step.test.js b/packages/steps/test/lion-step.test.js
index 67668cb20..53a4a8b8e 100644
--- a/packages/steps/test/lion-step.test.js
+++ b/packages/steps/test/lion-step.test.js
@@ -1,4 +1,4 @@
-import { expect, fixture, fixtureSync, html, oneEvent } from '@open-wc/testing';
+import { expect, fixture, html, oneEvent } from '@open-wc/testing';
import '../lion-step.js';
@@ -35,30 +35,6 @@ describe('lion-step', () => {
expect(el.children[0].passesCondition()).to.equal(false);
});
- it('allows to define it as the initial-step', async () => {
- const el = fixtureSync(html`
-
- Step 1
-
- `);
- el.steps = [el.children[0]];
- await el.updateComplete;
- expect(el.current).to.equal(0);
- expect(el.children[0].status).to.equal('entered');
-
- const el2 = fixtureSync(html`
-
- Step 1
- Step 2
-
- `);
- el2.steps = [el2.children[0], el2.children[1]];
- await el2.updateComplete;
- expect(el2.current).to.equal(1);
- expect(el2.children[0].status).to.equal('untouched');
- expect(el2.children[1].status).to.equal('entered');
- });
-
it('has "untouched" status by default', async () => {
const el = await fixture(html`
diff --git a/packages/steps/test/lion-steps.test.js b/packages/steps/test/lion-steps.test.js
index ce2ef4296..ebea44a45 100644
--- a/packages/steps/test/lion-steps.test.js
+++ b/packages/steps/test/lion-steps.test.js
@@ -1,5 +1,5 @@
import sinon from 'sinon';
-import { expect, fixture, html, oneEvent } from '@open-wc/testing';
+import { expect, fixture, html, oneEvent, nextFrame } from '@open-wc/testing';
import '../lion-steps.js';
import '../lion-step.js';
@@ -130,6 +130,7 @@ describe('lion-steps', () => {
Step 4
`);
+ await nextFrame();
el.current = 2;
await checkWorkflow(el, {
@@ -191,6 +192,30 @@ describe('lion-steps', () => {
expect(currentInEnterEvent).to.equal(1);
});
+ it('will fire initial @enter event on first step with or with [initial-step] attribute', async () => {
+ const firstEnterSpy = sinon.spy();
+ await fixture(html`
+
+
+ test1
+
+
+ `);
+ await nextFrame();
+ expect(firstEnterSpy).to.have.been.calledOnce;
+
+ const firstEnterSpyWithInitial = sinon.spy();
+ await fixture(html`
+
+
+ test1
+
+
+ `);
+ await nextFrame();
+ expect(firstEnterSpyWithInitial).to.have.been.calledOnce;
+ });
+
it('will fire initial @enter event only once if [initial-step] is not on first step', async () => {
const firstEnterSpy = sinon.spy();
const secondEnterSpy = sinon.spy();