Bug Fix: Each Slide component does not listen to events after refresh.

dist/js/splide.js

@@ -913,27 +913,14 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       bind(slide, "click keydown", function (e) {
         emit(e.type === "click" ? EVENT_CLICK : EVENT_SLIDE_KEYDOWN, _this2, e);
       });
-      on(EVENT_MOUNTED, onMounted.bind(this));
-    }
-
-    function onMounted() {
-      var boundUpdate = update.bind(this);
-      boundUpdate();
-      on([EVENT_MOVED, EVENT_UPDATED, EVENT_RESIZED, EVENT_SCROLLED], boundUpdate);
+      on([EVENT_MOUNTED, EVENT_MOVED, EVENT_UPDATED, EVENT_SCROLLED], update.bind(this));
+      on(EVENT_RESIZED, onResized.bind(this));
 
       if (updateOnMove) {
         on(EVENT_MOVE, onMove.bind(this));
       }
     }
 
-    function onMove(next, prev, dest) {
-      if (dest === index) {
-        updateActivity.call(this, true);
-      }
-
-      update.call(this);
-    }
-
     function init() {
       if (!isClone) {
         slide.id = root.id + "-slide" + pad(index + 1);
@@ -960,6 +947,20 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       removeAttribute(slide, ALL_ATTRIBUTES);
     }
 
+    function onResized() {
+      if (!Splide2.state.is(CREATED)) {
+        update.call(this);
+      }
+    }
+
+    function onMove(next, prev, dest) {
+      if (dest === index) {
+        updateActivity.call(this, true);
+      }
+
+      update.call(this);
+    }
+
     function update() {
       var currIndex = Splide2.index;
       updateActivity.call(this, isActive());

src/js/components/Slides/Slide.ts

@@ -29,6 +29,7 @@ import {
   EVENT_UPDATED,
   EVENT_VISIBLE,
 } from '../../constants/events';
+import { CREATED } from '../../constants/states';
 import { FADE, SLIDE } from '../../constants/types';
 import { EventInterface } from '../../constructors';
 import { Splide } from '../../core/Splide/Splide';
@@ -96,38 +97,14 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide:
       emit( e.type === 'click' ? EVENT_CLICK : EVENT_SLIDE_KEYDOWN, this, e );
     } );
 
-    on( EVENT_MOUNTED, onMounted.bind( this ) );
-  }
-
-  /**
-   * Called after all components are mounted.
-   * Updating the status on mount is too early to notify other components of the active slide.
-   */
-  function onMounted( this: SlideComponent ): void {
-    const boundUpdate = update.bind( this );
-    boundUpdate();
-    on( [ EVENT_MOVED, EVENT_UPDATED, EVENT_RESIZED, EVENT_SCROLLED ], boundUpdate );
+    on( [ EVENT_MOUNTED, EVENT_MOVED, EVENT_UPDATED, EVENT_SCROLLED ], update.bind( this ) );
+    on( EVENT_RESIZED, onResized.bind( this ) );
 
     if ( updateOnMove ) {
       on( EVENT_MOVE, onMove.bind( this ) );
     }
   }
 
-  /**
-   * If the `updateOnMove` option is `true`, called when the slider starts moving.
-   *
-   * @param next - A next index.
-   * @param prev - A previous index.
-   * @param dest - A destination index.
-   */
-  function onMove( this: SlideComponent, next: number, prev: number, dest: number ): void {
-    if ( dest === index ) {
-      updateActivity.call( this, true );
-    }
-
-    update.call( this );
-  }
-
   /**
    * Initializes the component.
    */
@@ -159,6 +136,32 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide:
     removeAttribute( slide, ALL_ATTRIBUTES );
   }
 
+  /**
+   * Called when the Layout component resizes the slider.
+   * Needs to check the `created` state because this is also called on initialization of the component,
+   * and it's too early to notify others of the active slide.
+   */
+  function onResized( this: SlideComponent ): void {
+    if ( ! Splide.state.is( CREATED ) ) {
+      update.call( this );
+    }
+  }
+
+  /**
+   * If the `updateOnMove` option is `true`, called when the slider starts moving.
+   *
+   * @param next - A next index.
+   * @param prev - A previous index.
+   * @param dest - A destination index.
+   */
+  function onMove( this: SlideComponent, next: number, prev: number, dest: number ): void {
+    if ( dest === index ) {
+      updateActivity.call( this, true );
+    }
+
+    update.call( this );
+  }
+
   /**
    * Updates attribute and classes of the slide.
    */

src/js/components/Slides/test/slide.test.ts

@@ -6,6 +6,7 @@ import {
   EVENT_SLIDE_KEYDOWN,
   EVENT_VISIBLE,
 } from '../../../constants/events';
+import { Splide } from '../../../core/Splide/Splide';
 import { fire, init, keydown } from '../../../test';
 import { format } from '../../../utils';
 import { SlideComponent } from '../Slide';
@@ -235,4 +236,23 @@ describe( 'Slide', () => {
     expect( slide.getAttribute( 'role' ) ).toBe( null );
     expect( slide.getAttribute( 'aria-label' ) ).toBe( null );
   } );
+
+  test( 'can notify the active slide of other components on initialization.', () => {
+    const splide   = init( { start: 1 }, { mount: false } );
+    const callback = jest.fn();
+
+    const component = ( Splide: Splide ) => {
+      return {
+        mount() {
+          Splide.on( EVENT_ACTIVE, Slide => {
+            expect( Slide.index ).toBe( 1 );
+            callback();
+          } );
+        }
+      }
+    }
+
+    splide.mount( { component } );
+    expect( callback ).toHaveBeenCalled();
+  } );
 } );