fix(TabBar): propogate key press events

rdkcentral · Nov 16, 2023 · 92b7f57 · 92b7f57
1 parent 1e93576
commit 92b7f57
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 0 deletions.
diff --git a/packages/@lightningjs/ui-components/src/components/TabBar/TabBar.js b/packages/@lightningjs/ui-components/src/components/TabBar/TabBar.js
@@ -179,10 +179,12 @@ export default class TabBar extends Base {
       this._updateTabs();
       this._updateTabBarHeight();
     }
+    return false;
   }
 
   _handleUp() {
     this.selectTabs();
+    return false;
   }
 
   _setTabs(tabs) {

diff --git a/packages/@lightningjs/ui-components/src/components/TabBar/TabBar.test.js b/packages/@lightningjs/ui-components/src/components/TabBar/TabBar.test.js
@@ -16,6 +16,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import lng from '@lightningjs/core';
 import { makeCreateComponent } from '@lightningjs/ui-components-test-utils';
 import Row from '../Row';
 import Tile from '../Tile';
@@ -128,6 +129,41 @@ describe('TabBar', () => {
     expect(tabBar._Tabs.items[1].mode).toBe('unfocused');
   });
 
+  it('should propogate key events', () => {
+    const onUp = jest.fn();
+    const onDown = jest.fn();
+    class Wrapper extends lng.Component {
+      static _template() {
+        return {
+          TabBar: {
+            type: TabBar,
+            tabs
+          }
+        };
+      }
+      _handleUp() {
+        onUp();
+      }
+      _handleDown() {
+        onDown();
+      }
+      _getFocused() {
+        return this.tag('TabBar');
+      }
+    }
+    const [, testRenderer] = makeCreateComponent(Wrapper)();
+
+    expect(onUp).not.toHaveBeenCalled();
+    expect(onDown).not.toHaveBeenCalled();
+
+    testRenderer.keyPress('Down');
+    expect(onUp).not.toHaveBeenCalled();
+    expect(onDown).toHaveBeenCalled();
+
+    testRenderer.keyPress('Up');
+    expect(onUp).toHaveBeenCalled();
+  });
+
   it('should update the TabBar height if the Tabs height changes', async () => {
     [tabBar, testRenderer] = createComponent(
       { tabs },