Enhancement for #113

Author: estruyf

CHANGELOG.JSON

@@ -8,10 +8,12 @@
           "`PeoplePicker`: ability to specify the source site to load users from [#110](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/110)",
           "`WebPartTitle`: changing font-sizes on different resolutions [#114](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/114)",
           "`WebPartTitle`: Added accessibility tags for web part title [#121](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/121)",
-          "`ListView`: Resizable columns - introduced a `isResizable` property [#119](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/119)"
+          "`ListView`: Resizable columns - introduced a `isResizable` property [#119](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/119)",
+          "`TaxonomyPicker`: table markup changed to DIV [#113](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/113)"
         ],
         "fixes": [
-          "`IFrameDialog`: dialog width is not correct in IE11 [#118](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/118)"
+          "`IFrameDialog`: dialog width is not correct in IE11 [#118](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/118)",
+          "`PeoplePicker`: fix freezes when typing in search values [#117](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/117)"
         ]
       },
       "contributions": ["Thomas Lamb", "Joel Rodrigues", "Mikael Svenson"]

CHANGELOG.md

@@ -8,10 +8,12 @@
 - `WebPartTitle`: changing font-sizes on different resolutions [#114](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/114)
 - `WebPartTitle`: Added accessibility tags for web part title [#121](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/121)
 - `ListView`: Resizable columns - introduced a `isResizable` property [#119](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/119)
+- `TaxonomyPicker`: table markup changed to DIV [#113](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/113)
 
 **Fixes**
 
 - `IFrameDialog`: dialog width is not correct in IE11 [#118](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/118)
+- `PeoplePicker`: fix freezes when typing in search values [#117](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/117)
 
 ## 1.7.0
 

docs/documentation/docs/about/release-notes.md

@@ -8,10 +8,12 @@
 - `WebPartTitle`: changing font-sizes on different resolutions [#114](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/114)
 - `WebPartTitle`: Added accessibility tags for web part title [#121](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/121)
 - `ListView`: Resizable columns - introduced a `isResizable` property [#119](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/119)
+- `TaxonomyPicker`: table markup changed to DIV [#113](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/113)
 
 **Fixes**
 
 - `IFrameDialog`: dialog width is not correct in IE11 [#118](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/118)
+- `PeoplePicker`: fix freezes when typing in search values [#117](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/117)
 
 ## 1.7.0
 

src/controls/taxonomyPicker/TaxonomyPicker.module.scss

@@ -14,12 +14,19 @@
   }
 }
 
-.termFieldTable {
+.termField {
+  align-items: center;
   border-spacing: 0;
+  display: flex;
   width: 100%;
 
-  .termFieldRow {
-    vertical-align: initial;
+  .termFieldInput {
+    width: 90%;
+  }
+
+  .termFieldButton {
+    text-align: center;
+    width: 10%;
   }
 
   input[type="text"] {

src/controls/taxonomyPicker/TaxonomyPicker.tsx

@@ -249,27 +249,23 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
     return (
       <div>
         {this.props.label && <Label>{this.props.label}</Label>}
-        <table className={styles.termFieldTable}>
-          <tbody>
-            <tr>
-              <td>
-                <TermPicker
-                  context={this.props.context}
-                  termPickerHostProps={this.props}
-                  disabled={this.props.disabled}
-                  value={this.state.activeNodes}
-                  isTermSetSelectable={this.props.isTermSetSelectable}
-                  onChanged={this.termsFromPickerChanged}
-                  allowMultipleSelections={this.props.allowMultipleSelections}
-                  disabledTermIds={this.props.disabledTermIds}
-                  disableChildrenOfDisabledParents={this.props.disableChildrenOfDisabledParents} />
-              </td>
-              <td className={styles.termFieldRow}>
-                <IconButton disabled={this.props.disabled} iconProps={{ iconName: 'Tag' }} onClick={this.onOpenPanel} />
-              </td>
-            </tr>
-          </tbody>
-        </table>
+        <div className={styles.termField}>
+          <div className={styles.termFieldInput}>
+            <TermPicker
+              context={this.props.context}
+              termPickerHostProps={this.props}
+              disabled={this.props.disabled}
+              value={this.state.activeNodes}
+              isTermSetSelectable={this.props.isTermSetSelectable}
+              onChanged={this.termsFromPickerChanged}
+              allowMultipleSelections={this.props.allowMultipleSelections}
+              disabledTermIds={this.props.disabledTermIds}
+              disableChildrenOfDisabledParents={this.props.disableChildrenOfDisabledParents} />
+          </div>
+          <div className={styles.termFieldButton}>
+            <IconButton disabled={this.props.disabled} iconProps={{ iconName: 'Tag' }} onClick={this.onOpenPanel} />
+          </div>
+        </div>
 
         <FieldErrorMessage errorMessage={this.state.errorMessage} />