Reset radio button inside a closed-and-reopened modal (ToolJet#922)

sofisdev · Oct 7, 2021 · 7a20af4 · 7a20af4
1 parent c95620c
commit 7a20af4
Showing 1 changed file with 13 additions and 6 deletions.
diff --git a/frontend/src/Editor/Components/RadioButton.jsx b/frontend/src/Editor/Components/RadioButton.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { resolveReferences, resolveWidgetFieldValue } from '@/_helpers/utils';
 
 export const RadioButton = function RadioButton({
@@ -48,6 +48,8 @@ export const RadioButton = function RadioButton({
     console.log(err);
   }
 
+  const value = currentState?.components[component?.name]?.value ?? parsedDefaultValue;
+
   let selectOptions = [];
 
   try {
@@ -68,14 +70,18 @@ export const RadioButton = function RadioButton({
     console.log(err);
   }
 
-  function onSelect(event) {
-    const selection = event.target.value;
+  function onSelect(selection) {
     onComponentOptionChanged(component, 'value', selection);
     if (selection) {
       onEvent('onSelectionChange', { component });
     }
   }
 
+  useEffect(() => {
+    onComponentOptionChanged(component, 'value', parsedDefaultValue);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [parsedDefaultValue]);
+
   return (
     <div
       data-disabled={parsedDisabledState}
@@ -89,15 +95,16 @@ export const RadioButton = function RadioButton({
       <span className="form-check-label form-check-label col-auto py-1" style={{ color: textColor }}>
         {label}
       </span>
-      <div className="col py-1" onChange={(e) => onSelect(e)}>
+      <div className="col py-1">
         {selectOptions.map((option, index) => (
           <label key={index} className="form-check form-check-inline">
             <input
               className="form-check-input"
-              defaultChecked={parsedDefaultValue === option.value}
+              checked={value === option.value}
               type="radio"
               value={option.value}
-              name="radio-options"
+              name={`${id}-radio-options`}
+              onChange={() => onSelect(option.value)}
             />
             <span className="form-check-label" style={{ color: textColor }}>
               {option.name}