Fixes #834 #844

ironmansoftware · Jun 3, 2019 · 413232a · 413232a
1 parent 365c0eb
commit 413232a
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 15 deletions.
diff --git a/src/UniversalDashboard.Materialize/Components/ud-input-field.jsx b/src/UniversalDashboard.Materialize/Components/ud-input-field.jsx
@@ -221,21 +221,18 @@ export default class UdInputField extends React.Component {
 
         if (field.type == 'radioButtons') {
 
-            var usePlaceholder = false;
-            if (field.placeholder && field.placeholder.length == field.validOptions.length) {
-                usePlaceholder = true;
-            }
-
             var self = this;
-
-            var options = field.validOptions.map(function(option, i) {
-                return {
-                    label: usePlaceholder ? field.placeholder[i] : option,
-                    value: option
-                }
-            });
-
-            return <RadioGroup id={field.name} name={field.name} label={""} onChange={e => self.onRadioChanged(field, e) } options={options} />
+            var options = field.validOptions.map(function(option, idx) {
+                return <label
+                    htmlFor={`${this.props.inputId}${field.name}${idx}`}
+                    key={`${this.props.inputId}${field.name}${idx}`}
+                >
+                    <input type="radio" name={`${this.props.inputId}${field.name}`} id={`${this.props.inputId}${field.name}${idx}`} disabled={field.disabled} onChange={e => self.onRadioChanged(field, e)} value={option} />
+                    <span>{option}</span>
+                </label>
+            }.bind(this));
+
+            return [<p>{field.placeholder ? field.placeholder : field.name}</p>, options];
         }
 
         if (field.type == 'file') {

diff --git a/src/UniversalDashboard.Materialize/Components/ud-input.jsx b/src/UniversalDashboard.Materialize/Components/ud-input.jsx
@@ -166,7 +166,16 @@ export default class Input extends React.Component {
         }
 
         var fields = this.state.fields.map(x => {
-            return <UdInputField validate={this.props.validate} key={x.name} {...x} fontColor={this.props.fontColor} onValueChanged={this.onValueChanged.bind(this)} onValidating={this.onValidating.bind(this)} onValidateComplete={this.onValidateComplete.bind(this)} onEnter={this.onSubmit.bind(this)}/>
+            return <UdInputField 
+                        validate={this.props.validate} 
+                        key={x.name} {...x} 
+                        fontColor={this.props.fontColor} 
+                        onValueChanged={this.onValueChanged.bind(this)} 
+                        onValidating={this.onValidating.bind(this)} 
+                        onValidateComplete={this.onValidateComplete.bind(this)} 
+                        onEnter={this.onSubmit.bind(this)}
+                        inputId={this.props.id}
+                        />
         });
 
         var actions = null