fix(headless/tabs): specific preventDefault

Author: shairez

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

@@ -20,11 +20,23 @@ export type TabProps = {
   disabled?: boolean;
 } & QwikIntrinsicElements['button'];
 
+export const preventedKeys = [
+  KeyCode.Home,
+  KeyCode.End,
+  KeyCode.PageDown,
+  KeyCode.PageUp,
+  KeyCode.ArrowDown,
+  KeyCode.ArrowUp,
+  KeyCode.ArrowLeft,
+  KeyCode.ArrowRight,
+];
+
 export const Tab = component$((props: TabProps) => {
   const contextService = useContext(tabsContextId);
   const isSelectedSig = useSignal(false);
   const serverAssignedIndexSig = useSignal<number | undefined>(undefined);
   const matchedTabPanelIdSig = useSignal<string | undefined>(undefined);
+  const elementRefSig = useSignal<HTMLElement | undefined>();
   const uniqueTabId = useId();
 
   useTask$(async function indexInitTask({ cleanup }) {
@@ -42,6 +54,8 @@ export const Tab = component$((props: TabProps) => {
   });
 
   useTask$(async function isSelectedTask({ track }) {
+    track(() => serverAssignedIndexSig.value);
+
     const isTabSelected = await track(() =>
       contextService.isTabSelected$(uniqueTabId)
     );
@@ -68,6 +82,19 @@ export const Tab = component$((props: TabProps) => {
     );
   });
 
+  useVisibleTask$(function preventDefaultOnKeysVisibleTask({ cleanup }) {
+    function handler(event: KeyboardEvent) {
+      if (preventedKeys.includes(event.key as KeyCode)) {
+        event.preventDefault();
+      }
+      contextService.onTabKeyDown$(event.key as KeyCode, uniqueTabId);
+    }
+    elementRefSig.value?.addEventListener('keydown', handler);
+    cleanup(() => {
+      elementRefSig.value?.removeEventListener('keydown', handler);
+    });
+  });
+
   const selectIfAutomatic$ = $(() => {
     contextService.selectIfAutomatic$(uniqueTabId);
   });
@@ -78,6 +105,7 @@ export const Tab = component$((props: TabProps) => {
       data-tab-id={uniqueTabId}
       type="button"
       role="tab"
+      ref={elementRefSig}
       disabled={props.disabled}
       aria-disabled={props.disabled}
       onFocus$={selectIfAutomatic$}
@@ -94,13 +122,6 @@ export const Tab = component$((props: TabProps) => {
           props.onClick$(event);
         }
       }}
-      preventdefault:keydown
-      onKeyDown$={(e) => {
-        contextService.onTabKeyDown$(
-          e.key as KeyCode,
-          (e.target as any).getAttribute('data-tab-id')
-        );
-      }}
     >
       <Slot />
     </button>

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

@@ -365,16 +365,19 @@ describe('Tabs', () => {
       });
     });
 
-    describe.skip('Manual behavior', () => {
+    describe('Manual behavior', () => {
       it(`GIVEN 3 tabs
           WHEN clicking the first one and triggering the right arrow key and then "enter"
           THEN the middle panel should be selected`, () => {
         cy.mount(<ThreeTabsComponent />);
 
-        cy.findByRole('tab', { name: /Tab 1/i })
-          .click()
-          .type('{rightarrow}')
-          .type('{enter}');
+        cy.findByRole('tab', { name: /Tab 1/i }).click().type('{rightarrow}');
+
+        const secondTab = cy.findByRole('tab', { name: /Tab 2/i });
+        secondTab.should('be.focused');
+        cy.findByRole('tabpanel').should('contain', 'Panel 1');
+
+        secondTab.type('{enter}');
 
         cy.findByRole('tabpanel').should('contain', 'Panel 2');
       });

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

@@ -18,12 +18,6 @@ import { KeyCode } from '../../utils/key-code.type';
 /**
  * TABS TODOs
  * 
- * Add "enter" or "space" keys when in manual behavior
- * 
- * Missing tests for:
- *  automatic and manual behavior
- * 
- * Add a test for custom onClick$
  * Add examples for:
  *  - Vertical
  *  - disabled