Field: make id optional, generate one if not provided

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

src/components/views/elements/EditableItemList.js

@@ -121,7 +121,7 @@ export default class EditableItemList extends React.Component {
         return (
             <form onSubmit={this._onItemAdded} autoComplete="off"
                   noValidate={true} className="mx_EditableItemList_newItem">
-                <Field id={`mx_EditableItemList_new_${this.props.id}`} label={this.props.placeholder} type="text"
+                <Field label={this.props.placeholder} type="text"
                        autoComplete="off" value={this.props.newItem || ""} onChange={this._onNewItemChanged}
                        list={this.props.suggestionsListId} />
                 <AccessibleButton onClick={this._onItemAdded} kind="primary" type="submit">

src/components/views/elements/Field.js

@@ -23,9 +23,15 @@ import { debounce } from 'lodash';
 // Invoke validation from user input (when typing, etc.) at most once every N ms.
 const VALIDATION_THROTTLE_MS = 200;
 
+const BASE_ID = "mx_Field";
+let count = 1;
+function getId() {
+    return `${BASE_ID}_${count++}`;
+}
+
 export default class Field extends React.PureComponent {
     static propTypes = {
-        // The field's ID, which binds the input and label together.
+        // The field's ID, which binds the input and label together. Immutable.
         id: PropTypes.string.isRequired,
         // The element to create. Defaults to "input".
         // To define options for a select, use <Field><option ... /></Field>
@@ -70,6 +76,8 @@ export default class Field extends React.PureComponent {
             feedback: undefined,
             focused: false,
         };
+
+        this.id = this.props.id || getId();
     }
 
     onFocus = (ev) => {
@@ -167,6 +175,7 @@ export default class Field extends React.PureComponent {
         inputProps.type = inputProps.type || "text";
         inputProps.ref = input => this.input = input;
         inputProps.placeholder = inputProps.placeholder || inputProps.label;
+        inputProps.id = this.id; // this overwrites the id from props
 
         inputProps.onFocus = this.onFocus;
         inputProps.onChange = this.onChange;
@@ -211,7 +220,7 @@ export default class Field extends React.PureComponent {
         return <div className={fieldClasses}>
             {prefixContainer}
             {fieldInput}
-            <label htmlFor={this.props.id}>{this.props.label}</label>
+            <label htmlFor={this.id}>{this.props.label}</label>
             {postfixContainer}
             {fieldTooltip}
         </div>;

src/components/views/elements/PowerSelector.js

@@ -132,7 +132,7 @@ export default createReactClass({
         const label = typeof this.props.label === "undefined" ? _t("Power level") : this.props.label;
         if (this.state.custom) {
             picker = (
-                <Field id={`powerSelector_custom_${this.props.powerLevelKey}`} type="number"
+                <Field type="number"
                        label={label} max={this.props.maxValue}
                        onBlur={this.onCustomBlur} onKeyDown={this.onCustomKeyDown} onChange={this.onCustomChange}
                        value={String(this.state.customValue)} disabled={this.props.disabled} />
@@ -151,7 +151,7 @@ export default createReactClass({
             });
 
             picker = (
-                <Field id={`powerSelector_notCustom_${this.props.powerLevelKey}`} element="select"
+                <Field element="select"
                        label={label} onChange={this.onSelectChange}
                        value={String(this.state.selectValue)} disabled={this.props.disabled}>
                     {options}

src/components/views/elements/RoomAliasField.js

@@ -23,7 +23,6 @@ import {MatrixClientPeg} from '../../../MatrixClientPeg';
 // Controlled form component wrapping Field for inputting a room alias scoped to a given domain
 export default class RoomAliasField extends React.PureComponent {
     static propTypes = {
-        id: PropTypes.string.isRequired,
         domain: PropTypes.string.isRequired,
         onChange: PropTypes.func,
         value: PropTypes.string.isRequired,
@@ -50,7 +49,6 @@ export default class RoomAliasField extends React.PureComponent {
                     className="mx_RoomAliasField"
                     prefix={poundSign}
                     postfix={domain}
-                    id={this.props.id}
                     ref={ref => this._fieldRef = ref}
                     onValidate={this._onValidate}
                     placeholder={_t("e.g. my-room")}