From 0047d52ef4087dac74888398d59b26c7dee2089f Mon Sep 17 00:00:00 2001
From: Jari Bakken <jari@finn.no>
Date: Wed, 3 Dec 2014 14:19:28 +0100
Subject: [PATCH] Ensure unique ids in feature form. Closes #57.

---
 public/js/components/feature/FeatureForm.jsx | 14 ++++++++------
 public/js/components/form/TextInput.jsx      |  2 +-
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/public/js/components/feature/FeatureForm.jsx b/public/js/components/feature/FeatureForm.jsx
index 70915fd20d..17998506d4 100644
--- a/public/js/components/feature/FeatureForm.jsx
+++ b/public/js/components/feature/FeatureForm.jsx
@@ -59,6 +59,8 @@ var FeatureForm = React.createClass({
           enabled: false
         };
 
+        var idPrefix = this.props.feature ? this.props.feature.name : 'new';
+
         return (
             <div className="bg-lilac-xlt r-pam">
                 <form ref="form" className="r-size1of2">
@@ -67,7 +69,7 @@ var FeatureForm = React.createClass({
                         {this.props.feature ? "" : <legend>Create new toggle</legend>}
 
                         <TextInput
-                            id="name"
+                            id={idPrefix + "-name"}
                             name="name"
                             label="Name"
                             value={feature.name}
@@ -76,7 +78,7 @@ var FeatureForm = React.createClass({
                             placeholder="Toggle name" />
 
                         <TextInput
-                            id="description"
+                            id={idPrefix + "-description"}
                             name="description"
                             label="Description"
                             value={feature.description}
@@ -84,9 +86,9 @@ var FeatureForm = React.createClass({
                             placeholder="Enter description" />
 
                         <div className="formelement">
-                            <label htmlFor="strategy">Strategy</label>
+                            <label htmlFor={idPrefix + "-strategy"}>Strategy</label>
                             <div className="input select">
-                                <select id="strategy" ref="strategy" value={this.state.currentStrategy} onChange={this.onStrategyChange}>
+                                <select id={idPrefix + "-strategy"} ref="strategy" value={this.state.currentStrategy} onChange={this.onStrategyChange}>
                                     {this.renderStrategyOptions()}
                                 </select>
                             </div>
@@ -96,8 +98,8 @@ var FeatureForm = React.createClass({
                             <div className="input">
                                 <ul className="inputs-list">
                                     <li>
-                                        <input id="active" ref="enabled" type="checkbox" defaultChecked={feature.enabled} />
-                                        <label htmlFor="active">Active</label>
+                                        <input id={idPrefix + "-active"} ref="enabled" type="checkbox" defaultChecked={feature.enabled} />
+                                        <label htmlFor={idPrefix + "-active"}>Active</label>
                                     </li>
                                 </ul>
                             </div>
diff --git a/public/js/components/form/TextInput.jsx b/public/js/components/form/TextInput.jsx
index 687774510f..53dc57468b 100644
--- a/public/js/components/form/TextInput.jsx
+++ b/public/js/components/form/TextInput.jsx
@@ -28,7 +28,7 @@ var TextInput = React.createClass({
     render: function() {
         return (
             <div className="formelement required">
-                <label htmlFor="strategy_name" className="t4">{this.props.label}</label>
+                <label htmlFor={this.props.id} className="t4">{this.props.label}</label>
                 <div className="input">
                     <input type="text"
                         id={this.props.id}