Merge pull request #588 from thejackshelton/tabs-sync-refactor

refactor(tabs): removed last visible task with sync$

Author: thejackshelton

packages/kit-headless/src/components/tabs/tab.tsx

@@ -6,11 +6,11 @@ import {
   useComputed$,
   useContext,
   useSignal,
-  useVisibleTask$,
+  sync$,
 } from '@builder.io/qwik';
-import { KeyCode } from '../../utils/key-code.type';
 import { TAB_PANEL_ID_PREFIX } from './tab-panel';
 import { tabsContextId } from './tabs-context-id';
+import { KeyCode } from '../../utils/key-code.type';
 
 export const TAB_ID_PREFIX = '_tab_';
 
@@ -21,17 +21,6 @@ export type TabProps = QwikIntrinsicElements['button'] & {
   tabId?: string;
 };
 
-const preventedKeys = [
-  KeyCode.Home,
-  KeyCode.End,
-  KeyCode.PageDown,
-  KeyCode.PageUp,
-  KeyCode.ArrowDown,
-  KeyCode.ArrowUp,
-  KeyCode.ArrowLeft,
-  KeyCode.ArrowRight,
-];
-
 export const Tab = component$<TabProps>(({ selectedClassName, tabId, ...props }) => {
   const contextService = useContext(tabsContextId);
 
@@ -48,20 +37,6 @@ export const Tab = component$<TabProps>(({ selectedClassName, tabId, ...props })
     return contextService.selectedTabIdSig.value === tabId;
   });
 
-  useVisibleTask$(function preventDefaultOnKeysVisibleTask({ cleanup }) {
-    function handler(event: KeyboardEvent) {
-      if (preventedKeys.includes(event.key as KeyCode)) {
-        event.preventDefault();
-      }
-      contextService.onTabKeyDown$(event.key as KeyCode, tabId!);
-    }
-    // TODO put the listener on TabList
-    elementRefSig.value?.addEventListener('keydown', handler);
-    cleanup(() => {
-      elementRefSig.value?.removeEventListener('keydown', handler);
-    });
-  });
-
   const selectIfAutomatic$ = $(() => {
     contextService.selectIfAutomatic$(tabId!);
   });
@@ -86,6 +61,27 @@ export const Tab = component$<TabProps>(({ selectedClassName, tabId, ...props })
       tabIndex={isSelectedSig.value ? 0 : -1}
       class={[props.class, classNamesSig.value]}
       onClick$={[$(() => contextService.selectTab$(tabId!)), props.onClick$]}
+      onKeyDown$={[
+        /* KeyCode cannot be used here. */
+        sync$((e: KeyboardEvent): void => {
+          const keys = [
+            'Home',
+            'End',
+            'PageDown',
+            'PageUp',
+            'ArrowDown',
+            'ArrowUp',
+            'ArrowLeft',
+            'ArrowRight',
+          ];
+
+          if (keys.includes(e.key)) {
+            e.preventDefault();
+          }
+        }),
+        $((e) => contextService.onTabKeyDown$(e.key as KeyCode, tabId!)),
+        props.onKeyDown$,
+      ]}
     >
       <Slot />
     </button>