Add workaround for click throughs on mobile devices in CalendarCell a…

…nd ListBox (#799)

## Background

We experience issues with click throughs in the DatePicker's calendar and in the ComboBox's list box on mobile devices. This was also noticed in React Aria's own examples.

## Solution

The issue was reported to react-spectrum, and they already linked to other related issues that had been reported before. In one of these, a workaround was suggested. 

The workaround is now tested locally in Spor, and seems to work great (and one can still scroll inside the list box). I believe we can release a new version and test this out in our app (otherwise I would have to copy the components to the app and test them there, which is a bit of a hassle, but not impossible, of course).

.changeset/sweet-plants-live.md

@@ -0,0 +1,5 @@
+---
+"@vygruppen/spor-react": patch
+---
+
+Add workaround for click throughs on mobile devices in CalendarCell and ListBox

packages/spor-react/src/datepicker/CalendarCell.tsx

@@ -5,7 +5,7 @@ import {
   isSameMonth,
   isToday,
 } from "@internationalized/date";
-import React, { useRef } from "react";
+import React, { useEffect, useRef } from "react";
 import { useCalendarCell } from "react-aria";
 import { CalendarState, RangeCalendarState } from "react-stately";
 
@@ -41,7 +41,22 @@ export function CalendarCell({ state, date, currentMonth }: CalendarCellProps) {
   if (isOutsideMonth) {
     stateProps["data-unavailable"] = true;
   }
-
+
+  /* 
+  Workaround to fix click througs on mobile devices
+  Related to https://github.com/adobe/react-spectrum/issues/4970
+  TODO: Follow up with react-spectrum to see if they can solve it on their end
+  */
+  useEffect(() => {
+    (ref as any)?.current?.addEventListener(
+      "touchend",
+      (event: TouchEvent) => {
+        event.preventDefault();
+      },
+      { passive: false, once: true }
+    );
+  }, []);
+
   return (
     <Box
       as="td"

packages/spor-react/src/input/ListBox.tsx

@@ -7,7 +7,7 @@ import {
   type BoxProps,
 } from "@chakra-ui/react";
 import type { Node } from "@react-types/shared";
-import React, { useContext, useRef } from "react";
+import React, { useContext, useEffect, useRef } from "react";
 import {
   AriaListBoxProps,
   useListBox,
@@ -152,6 +152,21 @@ function Option({ item, state }: OptionProps) {
     dataFields["data-focus"] = true;
   }
 
+  /* 
+  Workaround to fix click througs on mobile devices
+  Related to https://github.com/adobe/react-spectrum/issues/4970
+  TODO: Follow up with react-spectrum to see if they can solve it on their end
+  */
+  useEffect(() => {
+    (ref as any)?.current?.addEventListener(
+      "touchend",
+      (event: TouchEvent) => {
+        event.preventDefault();
+      },
+      { passive: false, once: true }
+    );
+  }, []);
+
   return (
     <OptionContext.Provider value={{ labelProps, descriptionProps }}>
       <ListItem {...optionProps} {...dataFields} ref={ref} sx={styles.item}>