fix: only calls preventDefault on parent container for certain keydow…

…n actions if the currentTarget is its equivalent

docs/nuxt.config.ts

@@ -19,7 +19,7 @@ export default defineNuxtConfig({
   css: ["@/assets/css/main.css"],
 
   experimental: {
-    componentIslands: true,
+    componentIslands: false,
   },
 
   runtimeConfig: {

playwright/tests/drag/place.spec.ts

@@ -18,7 +18,7 @@ test.describe("Place plugin", async () => {
     // the parent container receive the parent drop zone class.
     await drag(page, {
       originEl: { id: "Apple", position: "center" },
-      destinationEl: { id: "Apple", çposition: "center" },
+      destinationEl: { id: "Apple", position: "center" },
       dragStart: true,
     });
     await expect(page.locator("#values_1")).toHaveText("Apple Banana Orange");

playwright/tests/synthetic-drag/non-native-selections-multiple.spec.ts

@@ -12,30 +12,34 @@ test.describe("Non native selections multiple", async () => {
     page.goto("http://localhost:3001/selections/non-native-multiple");
     await new Promise((r) => setTimeout(r, 1000));
 
-    // Can click to apply selected class and aria-selected
-    await page.locator("#Apple").click();
+    // Can pointerdown/up to apply selected class and aria-selected
+    await page.locator("#Apple").dispatchEvent("pointerdown");
+    await page.locator("#Apple").dispatchEvent("pointerup");
     await expect(page.locator("#Apple")).toHaveAttribute(
       "aria-selected",
       "true"
     );
     await expect(page.locator("#Apple")).toHaveClass("item selected active");
-    await page.locator("#Apple").click();
+    await page.locator("#Apple").dispatchEvent("pointerdown");
+    await page.locator("#Apple").dispatchEvent("pointerup");
 
-    // Clicking on the same item will deselect it
+    // Pointer events on the same item will deselect it
     await expect(page.locator("#Apple")).toHaveAttribute(
       "aria-selected",
       "false"
     );
     await expect(page.locator("#Apple")).toHaveClass("item active");
 
-    // Can click multiple items in single select mode
-    await page.locator("#Apple").click();
+    // Can pointer select multiple items in single select mode
+    await page.locator("#Apple").dispatchEvent("pointerdown");
+    await page.locator("#Apple").dispatchEvent("pointerup");
     await expect(page.locator("#Apple")).toHaveAttribute(
       "aria-selected",
       "true"
     );
     await expect(page.locator("#Apple")).toHaveClass("item selected active");
-    await page.locator("#Banana").click();
+    await page.locator("#Banana").dispatchEvent("pointerdown");
+    await page.locator("#Banana").dispatchEvent("pointerup");
     await expect(page.locator("#Apple")).toHaveAttribute(
       "aria-selected",
       "true"
@@ -47,8 +51,9 @@ test.describe("Non native selections multiple", async () => {
     );
     await expect(page.locator("#Banana")).toHaveClass("item selected active");
 
-    // Clicking the header will deselect all items
-    await page.locator("#title").click();
+    // Pointer events on header will deselect all items
+    await page.locator("#title").dispatchEvent("pointerdown");
+    await page.locator("#title").dispatchEvent("pointerup");
     await expect(page.locator("#Apple")).toHaveAttribute(
       "aria-selected",
       "false"
@@ -60,15 +65,17 @@ test.describe("Non native selections multiple", async () => {
     );
     await expect(page.locator("#Banana")).toHaveClass("item");
 
-    // Clicking Apple, then clicking "Carrot" in the other group will deselect
+    // Selecting Apple, then selecting "Carrot" in the other group will deselect
     // Apple
-    await page.locator("#Apple").click();
+    await page.locator("#Apple").dispatchEvent("pointerdown");
+    await page.locator("#Apple").dispatchEvent("pointerup");
     await expect(page.locator("#Apple")).toHaveAttribute(
       "aria-selected",
       "true"
     );
     await expect(page.locator("#Apple")).toHaveClass("item selected active");
-    await page.locator("#Carrot").click();
+    await page.locator("#Carrot").dispatchEvent("pointerdown");
+    await page.locator("#Carrot").dispatchEvent("pointerup");
     await expect(page.locator("#Apple")).toHaveAttribute(
       "aria-selected",
       "false"

playwright/tests/synthetic-drag/non-native-selections-single.spec.ts

@@ -12,14 +12,16 @@ test.describe("Non native selections single", async () => {
     page.goto("http://localhost:3001/selections/non-native-single");
     await new Promise((r) => setTimeout(r, 1000));
 
-    // Can click to apply selected class and aria-selected
-    await page.locator("#Apple").click();
+    // Can pointerdown/up to apply selected class and aria-selected
+    await page.locator("#Apple").dispatchEvent("pointerdown");
+    await page.locator("#Apple").dispatchEvent("pointerup");
     await expect(page.locator("#Apple")).toHaveAttribute(
       "aria-selected",
       "true"
     );
     await expect(page.locator("#Apple")).toHaveClass("item selected active");
-    await page.locator("#Apple").click();
+    await page.locator("#Apple").dispatchEvent("pointerdown");
+    await page.locator("#Apple").dispatchEvent("pointerup");
 
     // Clicking on the same item will deselect it
     await expect(page.locator("#Apple")).toHaveAttribute(
@@ -28,14 +30,16 @@ test.describe("Non native selections single", async () => {
     );
     await expect(page.locator("#Apple")).toHaveClass("item active");
 
-    // Can not click multiple items in single select mode
-    await page.locator("#Apple").click();
+    // Can not select multiple items in single select mode
+    await page.locator("#Apple").dispatchEvent("pointerdown");
+    await page.locator("#Apple").dispatchEvent("pointerup");
     await expect(page.locator("#Apple")).toHaveAttribute(
       "aria-selected",
       "true"
     );
     await expect(page.locator("#Apple")).toHaveClass("item selected active");
-    await page.locator("#Banana").click();
+    await page.locator("#Banana").dispatchEvent("pointerdown");
+    await page.locator("#Banana").dispatchEvent("pointerup");
     await expect(page.locator("#Apple")).toHaveAttribute(
       "aria-selected",
       "false"
@@ -48,7 +52,8 @@ test.describe("Non native selections single", async () => {
     await expect(page.locator("#Banana")).toHaveClass("item selected active");
 
     // Clicking the header will deselect all items
-    await page.locator("#title").click();
+    await page.locator("#title").dispatchEvent("pointerdown");
+    await page.locator("#title").dispatchEvent("pointerup");
     await expect(page.locator("#Apple")).toHaveAttribute(
       "aria-selected",
       "false"
@@ -60,15 +65,17 @@ test.describe("Non native selections single", async () => {
     );
     await expect(page.locator("#Banana")).toHaveClass("item");
 
-    // Clicking Apple, then clicking "Carrot" in the other group will deselect
+    // Selecting Apple, then selecting "Carrot" in the other group will deselect
     // Apple
-    await page.locator("#Apple").click();
+    await page.locator("#Apple").dispatchEvent("pointerdown");
+    await page.locator("#Apple").dispatchEvent("pointerup");
     await expect(page.locator("#Apple")).toHaveAttribute(
       "aria-selected",
       "true"
     );
     await expect(page.locator("#Apple")).toHaveClass("item selected active");
-    await page.locator("#Carrot").click();
+    await page.locator("#Carrot").dispatchEvent("pointerdown");
+    await page.locator("#Carrot").dispatchEvent("pointerup");
     await expect(page.locator("#Apple")).toHaveAttribute(
       "aria-selected",
       "false"

src/index.ts

@@ -1828,6 +1828,8 @@ export function handleParentKeydown<T>(
   if (
     ["ArrowDown", "ArrowUp", "ArrowRight", "ArrowLeft"].includes(data.e.key)
   ) {
+    if (data.e.target === data.targetData.parent.el) pd(data.e);
+
     const nextIndex =
       data.e.key === "ArrowDown" || data.e.key === "ArrowRight"
         ? index + 1
@@ -1839,6 +1841,8 @@ export function handleParentKeydown<T>(
 
     setActive(data.targetData.parent, nextNode, state);
   } else if (data.e.key === " ") {
+    if (data.e.target === data.targetData.parent.el) pd(data.e);
+
     state.selectedState && state.selectedState.nodes.includes(activeDescendant)
       ? setSelected(
           data.targetData.parent,

tests/.nuxt/nuxt.d.ts

@@ -1,7 +1,7 @@
 // Generated by nuxi
-/// <reference types="@nuxtjs/tailwindcss" />
 /// <reference types="@nuxt/devtools" />
 /// <reference types="@nuxt/telemetry" />
+/// <reference types="@nuxtjs/tailwindcss" />
 /// <reference types="nuxt" />
 /// <reference path="types/app-defaults.d.ts" />
 /// <reference path="types/plugins.d.ts" />