diff --git a/packages/steps/src/LionSteps.js b/packages/steps/src/LionSteps.js index c44c7cd78..d9ef3972a 100644 --- a/packages/steps/src/LionSteps.js +++ b/packages/steps/src/LionSteps.js @@ -110,13 +110,14 @@ export class LionSteps extends ObserverMixin(LionLitElement) { const toStep = { number: newCurrent, element: newStepElement }; oldStepElement.leave(); - newStepElement.enter(); if (this.current !== newCurrent) { this._internalCurrentSync = true; this.current = newCurrent; } + newStepElement.enter(); + this._dispatchTransitionEvent(fromStep, toStep); } diff --git a/packages/steps/test/lion-steps.test.js b/packages/steps/test/lion-steps.test.js index 06b1e6d5d..65f2428fb 100644 --- a/packages/steps/test/lion-steps.test.js +++ b/packages/steps/test/lion-steps.test.js @@ -158,6 +158,40 @@ describe('lion-steps', () => { }); }); + describe('events', () => { + it('will trigger lion-step @leave event before changing .current', async () => { + let currentInLeaveEvent; + const onLeave = ev => { + currentInLeaveEvent = ev.target.controller.current; + }; + const el = await fixture(html` + + Step 0 + Step 1 + Step 2 + + `); + el.next(); + expect(currentInLeaveEvent).to.equal(0); + }); + + it('will trigger lion-step @enter event after changing .current', async () => { + let currentInEnterEvent; + const onEnter = ev => { + currentInEnterEvent = ev.target.controller.current; + }; + const el = await fixture(html` + + Step 0 + Step 1 + Step 2 + + `); + el.next(); + expect(currentInEnterEvent).to.equal(1); + }); + }); + describe('workflow with data and conditions', () => { it('navigates to the next step which passes the condition', async () => { const el = await fixture(html`