Remove breaking change

flarum · Sep 10, 2021 · 4f19eab · 4f19eab
1 parent 6d5deee
commit 4f19eab
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 9 deletions.
diff --git a/js/src/forum/components/Search.tsx b/js/src/forum/components/Search.tsx
@@ -187,7 +187,7 @@ export default class Search<T extends SearchAttrs = SearchAttrs> extends Compone
     this.navigator
       .onUp(() => this.setIndex(this.getCurrentNumericIndex() - 1, true))
       .onDown(() => this.setIndex(this.getCurrentNumericIndex() + 1, true))
-      .onSelect(this.selectResult.bind(this))
+      .onSelect(this.selectResult.bind(this), true)
       .onCancel(this.clear.bind(this))
       .bindTo($input);
 

diff --git a/js/src/forum/utils/KeyboardNavigatable.ts b/js/src/forum/utils/KeyboardNavigatable.ts
@@ -1,6 +1,18 @@
 type KeyboardEventHandler = (event: KeyboardEvent) => void;
 type ShouldHandle = (event: KeyboardEvent) => boolean;
 
+enum Keys {
+  Enter = 13,
+  Escape = 27,
+  Space = 32,
+  ArrowUp = 38,
+  ArrowDown = 40,
+  ArrowLeft = 37,
+  ArrowRight = 39,
+  Tab = 9,
+  Backspace = 8,
+}
+
 /**
  * The `KeyboardNavigatable` class manages lists that can be navigated with the
  * keyboard, calling callbacks for each actions.
@@ -26,7 +38,7 @@ export default class KeyboardNavigatable {
    * This will be triggered by the Up key.
    */
   onUp(callback: KeyboardEventHandler): KeyboardNavigatable {
-    this.callbacks.set(38, (e) => {
+    this.callbacks.set(Keys.ArrowUp, (e) => {
       e.preventDefault();
       callback(e);
     });
@@ -40,7 +52,7 @@ export default class KeyboardNavigatable {
    * This will be triggered by the Down key.
    */
   onDown(callback: KeyboardEventHandler): KeyboardNavigatable {
-    this.callbacks.set(40, (e) => {
+    this.callbacks.set(Keys.ArrowDown, (e) => {
       e.preventDefault();
       callback(e);
     });
@@ -51,15 +63,16 @@ export default class KeyboardNavigatable {
   /**
    * Provide a callback to be executed when the current item is selected..
    *
-   * This will be triggered by the Return key.
+   * This will be triggered by the Return key (and Tab key, if not disabled).
    */
-  onSelect(callback: KeyboardEventHandler): KeyboardNavigatable {
+  onSelect(callback: KeyboardEventHandler, ignoreTabPress: boolean = false): KeyboardNavigatable {
     const handler: KeyboardEventHandler = (e) => {
       e.preventDefault();
       callback(e);
     };
 
-    this.callbacks.set(13, handler);
+    if (!ignoreTabPress) this.callbacks.set(Keys.Tab, handler);
+    this.callbacks.set(Keys.Enter, handler);
 
     return this;
   }
@@ -86,7 +99,7 @@ export default class KeyboardNavigatable {
    * This will be triggered by the Escape key.
    */
   onCancel(callback: KeyboardEventHandler): KeyboardNavigatable {
-    this.callbacks.set(27, (e) => {
+    this.callbacks.set(Keys.Escape, (e) => {
       e.stopPropagation();
       e.preventDefault();
       callback(e);
@@ -101,7 +114,7 @@ export default class KeyboardNavigatable {
    * This will be triggered by the Backspace key.
    */
   onRemove(callback: KeyboardEventHandler): KeyboardNavigatable {
-    this.callbacks.set(8, (e) => {
+    this.callbacks.set(Keys.Backspace, (e) => {
       if (e.target.selectionStart === 0 && e.target.selectionEnd === 0) {
         callback(e);
         e.preventDefault();
@@ -125,7 +138,7 @@ export default class KeyboardNavigatable {
    */
   bindTo($element: JQuery<HTMLElement>) {
     // Handle navigation key events on the navigatable element.
-    $element.on('keydown', this.navigate.bind(this));
+    $element.on('keydown', this.navigate.bind(this) as unknown as (e: JQuery.KeyDownEvent<HTMLElement, undefined, HTMLElement, HTMLElement>) => void);
   }
 
   /**