[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": "ia.samoylov@icloud.com"
+}

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

@@ -84,7 +84,7 @@ describe('TextField', () => {
 
     const renderedDOM: HTMLElement = renderIntoDocument(
       <TextField
-        prefix={ examplePrefix}
+        prefix={ examplePrefix }
         suffix={ exampleSuffix }
       />
     );
@@ -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
+        componentId={ 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

@@ -143,12 +143,13 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
       onRenderAddon = this._onRenderAddon, // @deprecated
       onRenderPrefix = this._onRenderPrefix,
       onRenderSuffix = this._onRenderSuffix,
-      onRenderLabel = this._onRenderLabel
+      onRenderLabel = this._onRenderLabel,
+      componentId = this._id
     } = this.props;
     let { isFocused } = this.state;
     const errorMessage = this._errorMessage;
     this._isDescriptionAvailable = Boolean(description || errorMessage);
-    const renderProps: ITextFieldProps = { ...this.props, componentId: this._id };
+    const renderProps: ITextFieldProps = { ...this.props, componentId };
 
     const textFieldClassName = css('ms-TextField', styles.root, className, {
       ['is-required ' + styles.rootIsRequiredLabel]: this.props.label && required,
@@ -175,7 +176,7 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
                 { onRenderPrefix(this.props, this._onRenderPrefix) }
               </div>
             ) }
-            { multiline ? this._renderTextArea() : this._renderInput() }
+            { multiline ? this._renderTextArea(renderProps) : this._renderInput(renderProps) }
             { (iconClass || iconProps) && <Icon className={ css(iconClass, styles.icon) } { ...iconProps } /> }
             { (suffix !== undefined || this.props.onRenderSuffix) && (
               <div className={ css('ms-TextField-suffix', styles.fieldPrefixSuffix) }>
@@ -343,12 +344,12 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
     return errorMessage;
   }
 
-  private _renderTextArea(): React.ReactElement<React.HTMLAttributes<HTMLAreaElement>> {
-    let textAreaProps = getNativeProps(this.props, textAreaProperties, ['defaultValue']);
+  private _renderTextArea(props: ITextFieldProps): React.ReactElement<React.HTMLAttributes<HTMLAreaElement>> {
+    let textAreaProps = getNativeProps(props, textAreaProperties, ['defaultValue']);
 
     return (
       <textarea
-        id={ this._id }
+        id={ props.componentId }
         { ...textAreaProps }
         ref={ this._resolveRef('_textElement') }
         value={ this.state.value }
@@ -357,27 +358,27 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
         className={ this._getTextElementClassName() }
         aria-describedby={ this._isDescriptionAvailable ? this._descriptionId : null }
         aria-invalid={ !!this.state.errorMessage }
-        aria-label={ this.props.ariaLabel }
+        aria-label={ props.ariaLabel }
         onFocus={ this._onFocus }
         onBlur={ this._onBlur }
       />
     );
   }
 
-  private _renderInput(): React.ReactElement<React.HTMLAttributes<HTMLInputElement>> {
-    let inputProps = getNativeProps<React.HTMLAttributes<HTMLInputElement>>(this.props, inputProperties, ['defaultValue']);
+  private _renderInput(props: ITextFieldProps): React.ReactElement<React.HTMLAttributes<HTMLInputElement>> {
+    let inputProps = getNativeProps<React.HTMLAttributes<HTMLInputElement>>(props, inputProperties, ['defaultValue']);
 
     return (
       <input
         type={ 'text' }
-        id={ this._id }
+        id={ props.componentId }
         { ...inputProps }
         ref={ this._resolveRef('_textElement') }
         value={ this.state.value }
         onInput={ this._onInputChange }
         onChange={ this._onInputChange }
         className={ this._getTextElementClassName() }
-        aria-label={ this.props.ariaLabel }
+        aria-label={ props.ariaLabel }
         aria-describedby={ this._isDescriptionAvailable ? this._descriptionId : null }
         aria-invalid={ !!this.state.errorMessage }
         onFocus={ this._onFocus }