Implementation of #464

Author: AJIXuMuK

docs/documentation/docs/controls/TaxonomyPicker.md

@@ -117,6 +117,7 @@ The TaxonomyPicker control can be configured with the following properties:
 | termActions | ITermActions | no | Allows to execute custom action on the term like e.g. get other term labelsITermActions. |
 | hideTagsNotAvailableForTagging | boolean | no | Specifies if the tags marked with 'Available for tagging' = false should be hidden |
 | hideDeprecatedTags | boolean | no | Specifies if deprecated tags  should be hidden |
+| placeholder | string | no | Short text hint to display in empty picker |
 
 Interface `IPickerTerm`
 

src/controls/taxonomyPicker/ITaxonomyPicker.ts

@@ -74,6 +74,11 @@ export interface ITaxonomyPickerProps  {
    */
   hideDeprecatedTags?: boolean;
 
+  /**
+   * Placeholder to be displayed in an empty term picker
+   */
+  placeholder?: string;
+
   /**
    * The method is used to get the validation error message and determine whether the input value is valid or not.
    *

src/controls/taxonomyPicker/TaxonomyPicker.tsx

@@ -260,37 +260,58 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
    * Renders the SPListpicker controls with Office UI  Fabric
    */
   public render(): JSX.Element {
+    const {
+      label,
+      context,
+      disabled,
+      isTermSetSelectable,
+      allowMultipleSelections,
+      disabledTermIds,disableChildrenOfDisabledParents,
+      placeholder,
+      panelTitle,
+      anchorId,
+      termActions
+    } = this.props;
+
+    const {
+      activeNodes,
+      errorMessage,
+      openPanel,
+      loaded,
+      termSetAndTerms
+    } = this.state;
 
     return (
       <div>
-        {this.props.label && <Label>{this.props.label}</Label>}
+        {label && <Label>{label}</Label>}
         <div className={styles.termField}>
           <div className={styles.termFieldInput}>
             <TermPicker
-              context={this.props.context}
+              context={context}
               termPickerHostProps={this.props}
-              disabled={this.props.disabled}
-              value={this.state.activeNodes}
-              isTermSetSelectable={this.props.isTermSetSelectable}
+              disabled={disabled}
+              value={activeNodes}
+              isTermSetSelectable={isTermSetSelectable}
               onChanged={this.termsFromPickerChanged}
-              allowMultipleSelections={this.props.allowMultipleSelections}
-              disabledTermIds={this.props.disabledTermIds}
-              disableChildrenOfDisabledParents={this.props.disableChildrenOfDisabledParents} />
+              allowMultipleSelections={allowMultipleSelections}
+              disabledTermIds={disabledTermIds}
+              disableChildrenOfDisabledParents={disableChildrenOfDisabledParents}
+              placeholder={placeholder} />
           </div>
           <div className={styles.termFieldButton}>
-            <IconButton disabled={this.props.disabled} iconProps={{ iconName: 'Tag' }} onClick={this.onOpenPanel} />
+            <IconButton disabled={disabled} iconProps={{ iconName: 'Tag' }} onClick={this.onOpenPanel} />
           </div>
         </div>
 
-        <FieldErrorMessage errorMessage={this.state.errorMessage} />
+        <FieldErrorMessage errorMessage={errorMessage} />
 
         <Panel
-          isOpen={this.state.openPanel}
+          isOpen={openPanel}
           hasCloseButton={true}
           onDismiss={this.onClosePanel}
           isLightDismiss={true}
           type={PanelType.medium}
-          headerText={this.props.panelTitle}
+          headerText={panelTitle}
           onRenderFooterContent={() => {
             return (
               <div className={styles.actions}>
@@ -302,26 +323,26 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
 
           {
             /* Show spinner in the panel while retrieving terms */
-            this.state.loaded === false ? <Spinner type={SpinnerType.normal} /> : ''
+            loaded === false ? <Spinner type={SpinnerType.normal} /> : ''
           }
           {
-            this.state.loaded === true && this.state.termSetAndTerms && (
-              <div key={this.state.termSetAndTerms.Id} >
-                <h3>{this.state.termSetAndTerms.Name}</h3>
-                <TermParent anchorId={this.props.anchorId}
+            loaded === true && termSetAndTerms && (
+              <div key={termSetAndTerms.Id} >
+                <h3>{termSetAndTerms.Name}</h3>
+                <TermParent anchorId={anchorId}
                   autoExpand={null}
-                  termset={this.state.termSetAndTerms}
-                  isTermSetSelectable={this.props.isTermSetSelectable}
+                  termset={termSetAndTerms}
+                  isTermSetSelectable={isTermSetSelectable}
                   termSetSelectedChange={this.termSetSelectedChange}
-                  activeNodes={this.state.activeNodes}
-                  disabledTermIds={this.props.disabledTermIds}
-                  disableChildrenOfDisabledParents={this.props.disableChildrenOfDisabledParents}
+                  activeNodes={activeNodes}
+                  disabledTermIds={disabledTermIds}
+                  disableChildrenOfDisabledParents={disableChildrenOfDisabledParents}
                   changedCallback={this.termsChanged}
-                  multiSelection={this.props.allowMultipleSelections}
+                  multiSelection={allowMultipleSelections}
                   spTermService={this.termsService}
 
                   updateTaxonomyTree={this.updateTaxonomyTree}
-                  termActions={this.props.termActions}
+                  termActions={termActions}
                 />
               </div>
             )

src/controls/taxonomyPicker/TermPicker.tsx

@@ -28,6 +28,7 @@ export interface ITermPickerProps {
   isTermSetSelectable?: boolean;
   disabledTermIds?: string[];
   disableChildrenOfDisabledParents?: boolean;
+  placeholder?: string;
 
   onChanged: (items: IPickerTerm[]) => void;
 }
@@ -188,19 +189,34 @@ export default class TermPicker extends React.Component<ITermPickerProps, ITermP
    * Render method
    */
   public render(): JSX.Element {
+    const {
+      disabled,
+      value,
+      onChanged,
+      allowMultipleSelections,
+      placeholder
+    } = this.props;
+
+    const {
+      terms
+    } = this.state;
+
     return (
       <div>
         <TermBasePicker
-          disabled={this.props.disabled}
+          disabled={disabled}
           onResolveSuggestions={this.onFilterChanged}
           onRenderSuggestionsItem={this.onRenderSuggestionsItem}
           getTextFromItem={this.onGetTextFromItem}
           onRenderItem={this.onRenderItem}
-          defaultSelectedItems={this.props.value}
-          selectedItems={this.state.terms}
-          onChange={this.props.onChanged}
-          itemLimit={!this.props.allowMultipleSelections ? 1 : undefined}
+          defaultSelectedItems={value}
+          selectedItems={terms}
+          onChange={onChanged}
+          itemLimit={!allowMultipleSelections ? 1 : undefined}
           className={styles.termBasePicker}
+          inputProps={{
+            placeholder: placeholder
+          }}
         />
       </div>
     );

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -753,6 +753,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
                   context={this.props.context}
                   onChange={this.onServicePickerChange}
                   isTermSetSelectable={false}
+                  placeholder="Select service"
                 />
 
                 <TaxonomyPicker