Fix: TypeError: Cannot read properties of undefined (reading '0') in …

…datagrid (#4724)

* Stop propagate on click radio group events

* Add changeset

* Refactor RadioGroup

* Add radix issue

.changeset/big-pets-bathe.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Fix "TypeError: Cannot read properties of undefined (reading '0')" error thrown by datagrid by stop propagating events from RadioGroup component in ChannelsAvailability. RadioGroup fires couple events at onec and datagrid listing to global onClick event, that cause error in datagrid.

src/components/ChannelsAvailabilityCard/Channel/ChannelAvailabilityItemContent.tsx

@@ -1,16 +1,11 @@
 // @ts-strict-ignore
 import { ChannelData } from "@dashboard/channels/utils";
+import { RadioGroup } from "@dashboard/components/RadioGroup";
 import useCurrentDate from "@dashboard/hooks/useCurrentDate";
 import useDateLocalize from "@dashboard/hooks/useDateLocalize";
 import { getFormErrors, getProductErrorMessage } from "@dashboard/utils/errors";
 import { TextField } from "@material-ui/core";
-import {
-  Box,
-  Checkbox,
-  Divider,
-  RadioGroup,
-  Text,
-} from "@saleor/macaw-ui-next";
+import { Box, Checkbox, Divider, Text } from "@saleor/macaw-ui-next";
 import React, { useState } from "react";
 import { useIntl } from "react-intl";
 

src/components/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,22 @@
+import {
+  RadioGroup as RadioGroupBase,
+  RadioGroupRootProps,
+} from "@saleor/macaw-ui-next";
+import React from "react";
+
+import { StopPropagation } from "../StopPropagation";
+
+const RadioGroupRoot = (props: RadioGroupRootProps) => {
+  // StopProgation is used here to block onClick events from RadioGroup that cause throw error in datagrid
+  // Datagrid listing for all on click event but RadioGroup emitated couple events at onced
+  // Radix issue: https://github.com/radix-ui/primitives/issues/1982
+  return (
+    <StopPropagation>
+      <RadioGroupBase {...props} />
+    </StopPropagation>
+  );
+};
+
+export const RadioGroup = Object.assign(RadioGroupRoot, {
+  Item: RadioGroupBase.Item,
+});

src/components/RadioGroup/index.ts

@@ -0,0 +1 @@
+export * from "./RadioGroup";

src/components/StopPropagation/StopPropagation.tsx

@@ -0,0 +1,12 @@
+import React, { ReactNode } from "react";
+
+interface StopPropagationProps {
+  children: ReactNode;
+}
+
+// If you don't want to click events bubble in the DOM tree, you can use this component.
+export const StopPropagation = ({ children }: StopPropagationProps) => {
+  const stopPropagation = (e: React.MouseEvent) => e.stopPropagation();
+
+  return <div onClick={stopPropagation}>{children}</div>;
+};

src/components/StopPropagation/index.ts

@@ -0,0 +1 @@
+export * from "./StopPropagation";