Simplify the logic.

src/js/components/Keyboard/Keyboard.ts

@@ -1,7 +1,7 @@
 import { ARROW_LEFT, ARROW_RIGHT } from '../../constants/arrows';
-import { EVENT_MOVE, EVENT_UPDATED } from '../../constants/events';
+import { EVENT_UPDATED } from '../../constants/events';
 import { BaseComponent, ComponentConstructor } from '../../types';
-import { nextTick } from '@splidejs/utils';
+import { prevent } from '../../../../../utils';
 
 
 /**
@@ -33,40 +33,18 @@ const KEYBOARD_EVENT = 'keydown';
  * @return A Keyboard component object.
  */
 export const Keyboard: ComponentConstructor<KeyboardComponent> = ( Splide, Components, options, event ) => {
-  const { on, bind, destroy } = event;
-  const { root } = Splide;
+  const { destroy } = event;
   const { resolve } = Components.Direction;
 
-  /**
-   * The target element of the keyboard event.
-   */
-  let target: Window | HTMLElement;
-
-  /**
-   * Indicates whether the component is currently disabled or not.
-   */
-  let disabled: boolean;
-
   /**
    * Called when the component is mounted.
    */
   function mount(): void {
-    init();
-    on( EVENT_UPDATED, destroy );
-    on( EVENT_UPDATED, init );
-    on( EVENT_MOVE, onMove );
-  }
-
-  /**
-   * Initializes the component.
-   */
-  function init(): void {
     const { keyboard } = options;
 
-    if ( keyboard ) {
-      target = keyboard === 'global' ? window : root;
-      bind( target, KEYBOARD_EVENT, onKeydown );
-    }
+    destroy();
+    keyboard && event.bind( keyboard === 'global' ? window : Splide.root, KEYBOARD_EVENT, onKeydown );
+    event.on( EVENT_UPDATED, mount );
   }
 
   /**
@@ -75,17 +53,7 @@ export const Keyboard: ComponentConstructor<KeyboardComponent> = ( Splide, Compo
    * @param value - Toggles disabling/enabling the keyboard input.
    */
   function disable( value: boolean ): void {
-    disabled = value;
-  }
-
-  /**
-   * Called when the slider moves.
-   * To avoid the slider from moving twice, wait for a tick.
-   */
-  function onMove(): void {
-    const _disabled = disabled;
-    disabled = true;
-    nextTick( () => { disabled = _disabled } );
+    value ? destroy() : mount();
   }
 
   /**
@@ -94,12 +62,12 @@ export const Keyboard: ComponentConstructor<KeyboardComponent> = ( Splide, Compo
    * @param e - A KeyboardEvent object.
    */
   function onKeydown( e: KeyboardEvent ): void {
-    if ( ! disabled ) {
-      if ( e.key === resolve( ARROW_LEFT ) ) {
-        Splide.go( '<' );
-      } else if ( e.key === resolve( ARROW_RIGHT ) ) {
-        Splide.go( '>' );
-      }
+    if ( e.key === resolve( ARROW_LEFT ) ) {
+      Splide.go( '<' );
+      prevent( e, true );
+    } else if ( e.key === resolve( ARROW_RIGHT ) ) {
+      Splide.go( '>' );
+      prevent( e, true );
     }
   }
 

src/js/components/Keyboard/test/general.test.ts

@@ -23,6 +23,8 @@ describe( 'Keyboard', () => {
 
     keydown( 'ArrowLeft' );
     expect( splide.index ).toBe( 0 );
+
+    splide.destroy();
   } );
 
   test( 'can control the slider by keyboards in TTB mode.', async () => {
@@ -45,6 +47,8 @@ describe( 'Keyboard', () => {
 
     keydown( 'ArrowUp' );
     expect( splide.index ).toBe( 0 );
+
+    splide.destroy();
   } );
 
   test( 'can control the slider by keyboards in RTL mode.', async () => {
@@ -67,6 +71,8 @@ describe( 'Keyboard', () => {
 
     keydown( 'ArrowRight' );
     expect( splide.index ).toBe( 0 );
+
+    splide.destroy();
   } );
 
   test( 'can control the slider by keyboards only when the slider has focus in the `focused` mode.', async () => {
@@ -84,6 +90,8 @@ describe( 'Keyboard', () => {
 
     keydown( 'ArrowRight', root );
     expect( splide.index ).toBe( 1 );
+
+    splide.destroy();
   } );
 
   test( 'can disable the keyboard input.', async () => {
@@ -111,5 +119,7 @@ describe( 'Keyboard', () => {
 
     keydown( 'ArrowLeft' );
     expect( splide.index ).toBe( 0 );
+
+    splide.destroy();
   } );
 } );