Fix conflict between two select_one items with same name but differen…

…t groups
replicatedhq · Mar 5, 2020 · 71b87c7 · 71b87c7
1 parent 0c9aed0
commit 71b87c7
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/web/init/src/components/config_render/ConfigRadio.jsx b/web/init/src/components/config_render/ConfigRadio.jsx
@@ -19,17 +19,17 @@ export default class ConfigRadio extends React.Component {
     const checked = val === this.props.name;
 
     return (
-      <div className="flex-auto flex u-marginRight--20">
+      <div className="flex-auto flex alignItems--center u-marginRight--20">
         <input
           type="radio"
           name={this.props.group}
-          id={this.props.name}
+          id={`${this.props.group}-${this.props.name}`}
           value={this.props.name}
           checked={checked}
           disabled={this.props.readOnly}
           onChange={(e) => this.handleOnChange(e)}
           className={`${this.props.className || ""} flex-auto ${this.props.readOnly ? "readonly" : ""}`} />
-        <label htmlFor={this.props.name} className={`u-marginLeft--small header-color field-section-sub-header u-userSelect--none ${this.props.readOnly ? "u-cursor--default" : "u-cursor--pointer"}`}>{this.props.title}</label>
+        <label htmlFor={`${this.props.group}-${this.props.name}`} className={`u-marginLeft--small header-color field-section-sub-header u-userSelect--none ${this.props.readOnly ? "u-cursor--default" : "u-cursor--pointer"}`}>{this.props.title}</label>
       </div>
     );
   }

diff --git a/web/init/src/components/config_render/ConfigSelectOne.jsx b/web/init/src/components/config_render/ConfigSelectOne.jsx
@@ -46,7 +46,7 @@ export default class ConfigSelectOne extends React.Component {
           />
           : null}
         {this.props.help_text !== "" ? <p className="field-section-help-text u-marginTop--small u-lineHeight--normal">{this.props.help_text}</p> : null}
-        <div className="field-input-wrapper u-marginTop--15 flex flexWrap--wrap">
+        <div className="field-input-wrapper u-marginTop--15 flex alignItems--center flexWrap--wrap">
           {options}
         </div>
       </div>