[TextField] Fixed support for the componentId attribute in component TextField

common/changes/office-ui-fabric-react/bugfix-fix-replaced-componentId-In-TextField_2018-02-06-19-53.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "fixed support for the componentId attribute",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]"
+}

common/changes/office-ui-fabric-react/bugfix-fix-replaced-componentId-In-TextField_2018-02-09-19-00.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "Used TextField's id for the input id. If none is provided, default to a generated one.",
+      "packageName": "office-ui-fabric-react",
+      "type": "none"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]"
+}

packages/office-ui-fabric-react/src/components/TextField/TextField.test.tsx

@@ -122,6 +122,25 @@ describe('TextField', () => {
     expect(inputDOM.id).toEqual(labelDOM.htmlFor);
   });
 
+  it('should associate the label and input box use custom id', () => {
+    const exampleComponentId: string = 'test-component-id';
+
+    const renderedDOM: HTMLElement = renderIntoDocument(
+      <TextField
+        id={ exampleComponentId }
+        label='text-field-label'
+        value='whatever value'
+      />
+    );
+
+    const inputDOM: HTMLInputElement = renderedDOM.getElementsByTagName('input')[0];
+    const labelDOM: HTMLLabelElement = renderedDOM.getElementsByTagName('label')[0];
+
+    // Assert the input ID and label FOR attribute are the equal to exampleComponentId.
+    expect(inputDOM.id).toEqual(exampleComponentId);
+    expect(labelDOM.htmlFor).toEqual(exampleComponentId);
+  });
+
   it('should render a disabled input element', () => {
     const renderedDOM: HTMLElement = renderIntoDocument(
       <TextField disabled={ true } />

packages/office-ui-fabric-react/src/components/TextField/TextField.tsx

@@ -70,8 +70,10 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
       'value': 'defaultValue'
     });
 
-    this._id = getId('TextField');
-    this._descriptionId = getId('TextFieldDescription');
+    let { id } = props;
+
+    this._id = typeof id === 'undefined' ? getId('TextField') : id;
+    this._descriptionId = typeof id === 'undefined' ? getId('TextFieldDescription') : `${id}Description`;
 
     this.state = {
       value: props.value || props.defaultValue || '',
@@ -151,7 +153,6 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
     const { isFocused } = this.state;
     const errorMessage = this._errorMessage;
     this._isDescriptionAvailable = Boolean(description || errorMessage);
-    const renderProps: ITextFieldProps = { ...this.props, componentId: this._id };
 
     const textFieldClassName = css('ms-TextField', styles.root, className, {
       ['is-required ' + styles.rootIsRequiredLabel]: this.props.label && required,
@@ -163,26 +164,28 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
       ['ms-TextField--borderless ' + styles.rootIsBorderless]: borderless
     });
 
+    let propsWithNewId = { ...this.props, id: this._id };
+
     return (
       <div className={ textFieldClassName }>
         <div className={ css('ms-TextField-wrapper', styles.wrapper, underlined ? errorMessage && styles.invalid : '') }>
-          { onRenderLabel(renderProps, this._onRenderLabel) }
+          { onRenderLabel(propsWithNewId, this._onRenderLabel) }
           <div className={ css('ms-TextField-fieldGroup', styles.fieldGroup, isFocused && styles.fieldGroupIsFocused, errorMessage && styles.invalid) }>
             { (addonString !== undefined || this.props.onRenderAddon) && (
               <div className={ css('ms-TextField-prefix', styles.fieldPrefixSuffix) }>
-                { onRenderAddon(this.props, this._onRenderAddon) }
+                { onRenderAddon(propsWithNewId, this._onRenderAddon) }
               </div>
             ) }
             { (prefix !== undefined || this.props.onRenderPrefix) && (
               <div className={ css('ms-TextField-prefix', styles.fieldPrefixSuffix) }>
-                { onRenderPrefix(this.props, this._onRenderPrefix) }
+                { onRenderPrefix(propsWithNewId, this._onRenderPrefix) }
               </div>
             ) }
             { multiline ? this._renderTextArea() : this._renderInput() }
             { (iconClass || iconProps) && <Icon className={ css(iconClass, styles.icon) } { ...iconProps } /> }
             { (suffix !== undefined || this.props.onRenderSuffix) && (
               <div className={ css('ms-TextField-suffix', styles.fieldPrefixSuffix) }>
-                { onRenderSuffix(this.props, this._onRenderSuffix) }
+                { onRenderSuffix(propsWithNewId, this._onRenderSuffix) }
               </div>
             ) }
           </div>
@@ -293,10 +296,11 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
   private _onRenderLabel(props: ITextFieldProps): JSX.Element | null {
     const {
       label,
-      componentId
-    } = props;
+      id
+     } = props;
+
     if (label) {
-      return (<Label htmlFor={ componentId }>{ label }</Label>);
+      return (<Label htmlFor={ id }>{ label }</Label>);
     }
     return null;
   }