diff --git a/.changeset/big-pets-bathe.md b/.changeset/big-pets-bathe.md new file mode 100644 index 00000000000..e3760f4745b --- /dev/null +++ b/.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. diff --git a/src/components/ChannelsAvailabilityCard/Channel/ChannelAvailabilityItemContent.tsx b/src/components/ChannelsAvailabilityCard/Channel/ChannelAvailabilityItemContent.tsx index 17b33aceae4..dce149d82cf 100644 --- a/src/components/ChannelsAvailabilityCard/Channel/ChannelAvailabilityItemContent.tsx +++ b/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"; diff --git a/src/components/RadioGroup/RadioGroup.tsx b/src/components/RadioGroup/RadioGroup.tsx new file mode 100644 index 00000000000..bde8fa40626 --- /dev/null +++ b/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 ( + + + + ); +}; + +export const RadioGroup = Object.assign(RadioGroupRoot, { + Item: RadioGroupBase.Item, +}); diff --git a/src/components/RadioGroup/index.ts b/src/components/RadioGroup/index.ts new file mode 100644 index 00000000000..da254de2986 --- /dev/null +++ b/src/components/RadioGroup/index.ts @@ -0,0 +1 @@ +export * from "./RadioGroup"; diff --git a/src/components/StopPropagation/StopPropagation.tsx b/src/components/StopPropagation/StopPropagation.tsx new file mode 100644 index 00000000000..0ba6f41fe92 --- /dev/null +++ b/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
{children}
; +}; diff --git a/src/components/StopPropagation/index.ts b/src/components/StopPropagation/index.ts new file mode 100644 index 00000000000..b47b687c559 --- /dev/null +++ b/src/components/StopPropagation/index.ts @@ -0,0 +1 @@ +export * from "./StopPropagation";