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`