Merge pull request #1618 from dxc-technology/gomezivann-radio-group-fix

Radio Group update

Author: Jialecl

lib/src/radio-group/Radio.tsx

@@ -1,9 +1,10 @@
-import React, { useLayoutEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import styled, { ThemeProvider } from "styled-components";
 import { RadioProps } from "./types";
 import { v4 as uuidv4 } from "uuid";
 import useTheme from "../useTheme";
 import { AdvancedTheme } from "../common/variables";
+import DxcFlex from "../flex/Flex";
 
 const DxcRadio = ({
   label,
@@ -25,7 +26,7 @@ const DxcRadio = ({
   };
 
   const [firstUpdate, setFirstUpdate] = useState(true);
-  useLayoutEffect(() => {
+  useEffect(() => {
     // Don't apply in the first render
     if (firstUpdate) {
       setFirstUpdate(false);
@@ -36,7 +37,7 @@ const DxcRadio = ({
 
   return (
     <ThemeProvider theme={colorsTheme.radioGroup}>
-      <RadioMainContainer>
+      <DxcFlex>
         <RadioContainer
           error={error}
           disabled={disabled}
@@ -62,7 +63,7 @@ const DxcRadio = ({
             {label}
           </Label>
         </RadioContainer>
-      </RadioMainContainer>
+      </DxcFlex>
     </ThemeProvider>
   );
 };
@@ -100,10 +101,6 @@ const getRadioInputStateColor = (
   }
 };
 
-const RadioMainContainer = styled.div`
-  display: flex;
-`;
-
 const RadioInputContainer = styled.span`
   display: flex;
   align-items: center;

lib/src/radio-group/RadioGroup.tsx

@@ -42,12 +42,21 @@ const DxcRadioGroup = React.forwardRef<RefType, RadioGroupPropsType>(
     const colorsTheme = useTheme();
     const translatedLabels = useTranslatedLabels();
 
-    const optionalItem = {
-      label: optionalItemLabel || translatedLabels.radioGroup.optionalItemLabelDefault,
-      value: "",
-      disabled,
-    };
-    const innerOptions = useMemo(() => (optional ? [...options, optionalItem] : options), [optional, options]);
+    const innerOptions = useMemo(
+      () =>
+        optional
+          ? [
+              ...options,
+              {
+                label: optionalItemLabel ?? translatedLabels.radioGroup.optionalItemLabelDefault,
+                value: "",
+                disabled,
+              },
+            ]
+          : options,
+      [optional, options, optionalItemLabel, translatedLabels]
+    );
+
     const [currentFocusIndex, setCurrentFocusIndex] = useState(getInitialFocusIndex(innerOptions, value ?? innerValue));
 
     const handleOnChange = useCallback(
@@ -64,7 +73,6 @@ const DxcRadioGroup = React.forwardRef<RefType, RadioGroupPropsType>(
       // If the radio group loses the focus to an element not contained inside it...
       if (!event.currentTarget.contains(event.relatedTarget as Node)) {
         setFirstTimeFocus(true);
-
         const currentValue = value ?? innerValue;
         !optional && !Boolean(currentValue)
           ? onBlur?.({ value: currentValue, error: translatedLabels.formFields.requiredSelectionErrorMessage })
@@ -142,7 +150,7 @@ const DxcRadioGroup = React.forwardRef<RefType, RadioGroupPropsType>(
             aria-readonly={readonly}
             aria-orientation={stacking === "column" ? "vertical" : "horizontal"}
           >
-            <ValueInput name={name} disabled={disabled} value={value ?? innerValue ?? ""} readOnly aria-hidden="true" />
+            <ValueInput name={name} disabled={disabled} value={value ?? innerValue ?? ""} readOnly />
             {innerOptions.map((option, index) => (
               <DxcRadio
                 key={`radio-${index}`}
@@ -172,9 +180,9 @@ const DxcRadioGroup = React.forwardRef<RefType, RadioGroupPropsType>(
 );
 
 const RadioGroupContainer = styled.div`
+  box-sizing: border-box;
   display: inline-flex;
   flex-direction: column;
-  box-sizing: border-box;
 `;
 
 const Label = styled.span<{ helperText: RadioGroupPropsType["helperText"]; disabled: RadioGroupPropsType["disabled"] }>`

website/screens/components/radio-group/code/examples/uncontrolled.ts

@@ -1,34 +1,47 @@
-import { DxcRadioGroup, DxcInset } from "@dxc-technology/halstack-react";
-import { useState } from "react";
+import {
+  DxcRadioGroup,
+  DxcInset,
+  DxcFlex,
+  DxcButton,
+} from "@dxc-technology/halstack-react";
+import { useRef } from "react";
 
 const code = `() => {
-    const [value, setValue] = useState("");
-    const onChange = (value) => {
-      console.log(value);
-    };
+  const radioGroupRef = useRef();
+
+  const handleSubmit = () => {
+    const radioGroup =
+      radioGroupRef.current.getElementsByTagName("input")[0];
+    console.log(radioGroup.value);
+  };
+
+  const options = [
+    { label: "Orange", value: "orange" },
+    { label: "Apple", value: "apple" },
+    { label: "Pear", value: "pear" },
+  ];
 
-    const options = [
-      { label: "Orange", value: "orange" },
-      { label: "Apple", value: "apple" },
-      { label: "Pear", value: "pear" },
-    ];
-  
-    return (
-      <DxcInset space="2rem">
+  return (
+    <DxcInset space="2rem">
+      <DxcFlex direction="column" gap="2rem">
         <DxcRadioGroup
           label="Fruit"
           defaultValue="apple"
           options={options}
-          onChange={onChange}
+          ref={radioGroupRef}
         />
-      </DxcInset>
-    );
-  }`;
+        <DxcButton label="Submit" type="submit" onClick={handleSubmit} />
+      </DxcFlex>
+    </DxcInset>
+  );
+}`;
 
 const scope = {
   DxcRadioGroup,
   DxcInset,
-  useState,
+  DxcFlex,
+  DxcButton,
+  useRef,
 };
 
 export default { code, scope };