Experiments/Nav component: Auto select/expand based on the selectedKey prop

common/changes/@uifabric/experiments/AutoExpandSelectedKey_2018-05-25-06-48.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/experiments",
+      "comment": "Experiments/Nav component: Auto select/expand based on the selectedKey prop",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/experiments",
+  "email": "sikrishn@microsoft.com"
+}

packages/experiments/src/components/Nav/Nav.tsx

@@ -58,6 +58,9 @@ class NavComponent extends NavBase {
     if (hasChildren) {
       // show child links
       link.isExpanded = !link.isExpanded;
+      // disable auto expand based on selected key prop, instead allow to toggle child links
+      link.disableAutoExpand = true;
+
       nextState.isLinkExpandStateChanged = true;
     }
     else if (link.onClick) {
@@ -141,6 +144,10 @@ class NavComponent extends NavBase {
     }
 
     const linkText = this.getLinkText(link, this.props.showMore);
+    const isChildLinkSelected = this.isChildLinkSelected(link);
+
+    // if allowed, auto expand if the child is selected
+    link.isExpanded = link.disableAutoExpand ? link.isExpanded : isChildLinkSelected;
 
     return (
       <li

packages/experiments/src/components/Nav/Nav.types.ts

@@ -110,6 +110,11 @@ export interface INavLink extends INavLink {
    * provide internal implementation to show/hide nav links based on isHidden property.
    */
   isShowMoreLink?: boolean;
+
+  /**
+   * (Optional) Provides an ability to toggle auto expand when the selectedKey prop is one of the child of this link
+   */
+  disableAutoExpand?: boolean;
 }
 
 export interface ICustomNavLinkGroup extends INavLinkGroup {

packages/experiments/src/components/Nav/examples/Nav.Example.tsx

@@ -70,7 +70,7 @@ export class NavExample extends React.Component<{}, {}> {
 
     return (
       <div>
-        <NavToggler groups={ navLinkGroups } dataHint='LeftNav' enableCustomization={ true } />
+        <NavToggler groups={ navLinkGroups } dataHint='LeftNav' enableCustomization={ true } selectedKey='key2' />
       </div>
     );
   }