TaxonomyPicker - ability to automatically select children (#765)

Author: AJIXuMuK

docs/documentation/docs/controls/TaxonomyPicker.md

@@ -173,6 +173,7 @@ The TaxonomyPicker control can be configured with the following properties:
 | required | boolean | no | Specifies if to display an asterisk near the label. Note that error message should be specified in `onGetErrorMessage` or `errorMessage` |
 | useSessionStorage | boolean | no | Specify if the control uses session storage. Default is set to true for better performance. |
 | onPanelSelectionChange | (prevValue: IPickerTerms, newValue: IPickerTerms) => void | no | Panel selection change handler. Can be used to interact with the control while selecting items in the panel, before Click or Cancel is clicked. |
+| selectChildrenIfParentSelected | boolean | no | Specifies if the children should be selected when parent item is selected (defaults to false).|
 
 
 Interface `IPickerTerm`

src/controls/taxonomyPicker/ITaxonomyPicker.ts

@@ -131,6 +131,12 @@ export interface ITaxonomyPickerProps  {
    * Panel selection change handler. Can be used to interact with the control while selecting items in the panel, before Click or Cancel is clicked.
    */
   onPanelSelectionChange?: (prevValue: IPickerTerms, newValue: IPickerTerms) => void;
+
+  /**
+   * Specifies if the childrens should be selected when parent is selected.
+   * By default this is set to false.
+   */
+  selectChildrenIfParentSelected?: boolean;
 }
 
 /**

src/controls/taxonomyPicker/TaxonomyPicker.tsx

@@ -236,6 +236,15 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
       return;
     }
 
+    const {
+      allowMultipleSelections,
+      selectChildrenIfParentSelected
+    } = this.props;
+
+    const {
+      termSetAndTerms
+    } = this.state;
+
     // Term item to add to the active nodes array
     const termItem = {
       name: term.Name,
@@ -244,27 +253,59 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
       termSet: term.TermSet.Id
     };
 
+    //
+    // checking if we need to process child terms
+    //
+    let children: ITerm[] = [];
+    if (allowMultipleSelections && selectChildrenIfParentSelected) {
+      if (term.Id === term.TermSet.Id) { // term set selected
+        children = termSetAndTerms.Terms || [];
+      }
+      else {
+        children = termSetAndTerms.Terms ? termSetAndTerms.Terms.filter(t => {
+          return t.PathOfTerm.indexOf(`${term.PathOfTerm};`) !== -1;
+        }) : [];
+      }
+    }
+
     // Check if the term is checked or unchecked
     if (checked) {
       // Check if it is allowed to select multiple terms
-      if (this.props.allowMultipleSelections) {
+      if (allowMultipleSelections) {
         // Add the checked term
         activeNodes.push(termItem);
+
         // Filter out the duplicate terms
         activeNodes = uniqBy(activeNodes, 'key');
       } else {
         // Only store the current selected item
         activeNodes = [termItem];
       }
+
+      if (children.length) {
+        activeNodes.push(...children.map(c => {
+          return {
+            name: c.Name,
+            key: c.Id,
+            path: c.PathOfTerm,
+            termSet: c.TermSet.Id
+          };
+        }));
+      }
     } else {
       // Remove the term from the list of active nodes
       activeNodes = activeNodes.filter(item => item.key !== term.Id);
+
+      if (children.length) {
+        const childIds = children.map(c => c.Id);
+        activeNodes = activeNodes.filter(item => childIds.indexOf(item.key) === -1);
+      }
     }
     // Sort all active nodes
     activeNodes = sortBy(activeNodes, 'path');
 
     if (this.props.onPanelSelectionChange) {
-      this.props.onPanelSelectionChange(this.state.activeNodes.slice(), activeNodes)
+      this.props.onPanelSelectionChange(this.state.activeNodes.slice(), activeNodes);
     }
 
     // Update the current state

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -717,7 +717,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
             label="Service Picker with custom actions"
             context={this.props.context}
             onChange={this.onServicePickerChange}
-            isTermSetSelectable={false}
+            isTermSetSelectable={true}
             termActions={{
               actions: [{
                 title: "Get term labels",