From a5afef9178daa32e7e0068ca238046868fa3d22c Mon Sep 17 00:00:00 2001
From: Ivan Samoylov <ia.samoylov@icloud.com>
Date: Wed, 7 Feb 2018 01:49:10 +0600
Subject: [PATCH 1/3] fixed support for the componentId attribute

+ changed initialization attributed componentId, added default value this._id
+ changed initialization of the variable renderProps
+ changed render function for <input/> and <area/>
+ added test to check attribute
---
 .../components/TextField/TextField.test.tsx   | 21 ++++++++++++++++-
 .../src/components/TextField/TextField.tsx    | 23 ++++++++++---------
 2 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/TextField/TextField.test.tsx b/packages/office-ui-fabric-react/src/components/TextField/TextField.test.tsx
index cca8acb4468347..c3805b1d23e214 100644
--- a/packages/office-ui-fabric-react/src/components/TextField/TextField.test.tsx
+++ b/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 } />
diff --git a/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx b/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx
index bb711fbd70f7ee..d41d3ab2ef98b1 100644
--- a/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx
+++ b/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 }

From 521bf2c68b3eabf38273968b954ecb0503d9dcfe Mon Sep 17 00:00:00 2001
From: Ivan Samoylov <ia.samoylov@icloud.com>
Date: Wed, 7 Feb 2018 01:54:57 +0600
Subject: [PATCH 2/3] Include a change request file

---
 ...ced-componentId-In-TextField_2018-02-06-19-53.json | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 common/changes/office-ui-fabric-react/bugfix-fix-replaced-componentId-In-TextField_2018-02-06-19-53.json

diff --git a/common/changes/office-ui-fabric-react/bugfix-fix-replaced-componentId-In-TextField_2018-02-06-19-53.json b/common/changes/office-ui-fabric-react/bugfix-fix-replaced-componentId-In-TextField_2018-02-06-19-53.json
new file mode 100644
index 00000000000000..b9313c1db61a3a
--- /dev/null
+++ b/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"
+}
\ No newline at end of file

From 54fe8b79928b00a789d80735481555293c16387b Mon Sep 17 00:00:00 2001
From: Ivan Samoylov <ia.samoylov@icloud.com>
Date: Sat, 10 Feb 2018 01:05:42 +0600
Subject: [PATCH 3/3] FIx TextField's id

+ Used TextField's id for the input id. If none is provided, default to a generated one.
+ For a custom rendering function creates a new props with a new id (this._id)
---
 ...onentId-In-TextField_2018-02-09-19-00.json | 11 +++++
 .../components/TextField/TextField.test.tsx   |  2 +-
 .../src/components/TextField/TextField.tsx    | 43 ++++++++++---------
 3 files changed, 35 insertions(+), 21 deletions(-)
 create mode 100644 common/changes/office-ui-fabric-react/bugfix-fix-replaced-componentId-In-TextField_2018-02-09-19-00.json

diff --git a/common/changes/office-ui-fabric-react/bugfix-fix-replaced-componentId-In-TextField_2018-02-09-19-00.json b/common/changes/office-ui-fabric-react/bugfix-fix-replaced-componentId-In-TextField_2018-02-09-19-00.json
new file mode 100644
index 00000000000000..b318bd09ce35da
--- /dev/null
+++ b/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": "ia.samoylov@icloud.com"
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/TextField/TextField.test.tsx b/packages/office-ui-fabric-react/src/components/TextField/TextField.test.tsx
index c3805b1d23e214..08b5f40f3461c7 100644
--- a/packages/office-ui-fabric-react/src/components/TextField/TextField.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/TextField/TextField.test.tsx
@@ -127,7 +127,7 @@ describe('TextField', () => {
 
     const renderedDOM: HTMLElement = renderIntoDocument(
       <TextField
-        componentId={ exampleComponentId }
+        id={ exampleComponentId }
         label='text-field-label'
         value='whatever value'
       />
diff --git a/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx b/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx
index d41d3ab2ef98b1..274a252387d6f7 100644
--- a/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx
+++ b/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 || '',
@@ -143,13 +145,11 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
       onRenderAddon = this._onRenderAddon, // @deprecated
       onRenderPrefix = this._onRenderPrefix,
       onRenderSuffix = this._onRenderSuffix,
-      onRenderLabel = this._onRenderLabel,
-      componentId = this._id
+      onRenderLabel = this._onRenderLabel
     } = this.props;
     let { isFocused } = this.state;
     const errorMessage = this._errorMessage;
     this._isDescriptionAvailable = Boolean(description || errorMessage);
-    const renderProps: ITextFieldProps = { ...this.props, componentId };
 
     const textFieldClassName = css('ms-TextField', styles.root, className, {
       ['is-required ' + styles.rootIsRequiredLabel]: this.props.label && required,
@@ -161,26 +161,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(renderProps) : this._renderInput(renderProps) }
+            { 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>
@@ -291,10 +293,11 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
   private _onRenderLabel(props: ITextFieldProps): JSX.Element | null {
     const {
       label,
-      componentId
+      id
      } = props;
+
     if (label) {
-      return (<Label htmlFor={ componentId }>{ label }</Label>);
+      return (<Label htmlFor={ id }>{ label }</Label>);
     }
     return null;
   }
@@ -344,12 +347,12 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
     return errorMessage;
   }
 
-  private _renderTextArea(props: ITextFieldProps): React.ReactElement<React.HTMLAttributes<HTMLAreaElement>> {
-    let textAreaProps = getNativeProps(props, textAreaProperties, ['defaultValue']);
+  private _renderTextArea(): React.ReactElement<React.HTMLAttributes<HTMLAreaElement>> {
+    let textAreaProps = getNativeProps(this.props, textAreaProperties, ['defaultValue']);
 
     return (
       <textarea
-        id={ props.componentId }
+        id={ this._id }
         { ...textAreaProps }
         ref={ this._resolveRef('_textElement') }
         value={ this.state.value }
@@ -358,27 +361,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={ props.ariaLabel }
+        aria-label={ this.props.ariaLabel }
         onFocus={ this._onFocus }
         onBlur={ this._onBlur }
       />
     );
   }
 
-  private _renderInput(props: ITextFieldProps): React.ReactElement<React.HTMLAttributes<HTMLInputElement>> {
-    let inputProps = getNativeProps<React.HTMLAttributes<HTMLInputElement>>(props, inputProperties, ['defaultValue']);
+  private _renderInput(): React.ReactElement<React.HTMLAttributes<HTMLInputElement>> {
+    let inputProps = getNativeProps<React.HTMLAttributes<HTMLInputElement>>(this.props, inputProperties, ['defaultValue']);
 
     return (
       <input
         type={ 'text' }
-        id={ props.componentId }
+        id={ this._id }
         { ...inputProps }
         ref={ this._resolveRef('_textElement') }
         value={ this.state.value }
         onInput={ this._onInputChange }
         onChange={ this._onInputChange }
         className={ this._getTextElementClassName() }
-        aria-label={ props.ariaLabel }
+        aria-label={ this.props.ariaLabel }
         aria-describedby={ this._isDescriptionAvailable ? this._descriptionId : null }
         aria-invalid={ !!this.state.errorMessage }
         onFocus={ this._onFocus }