Layer: Fix FocusTrapZone detection of Layered children (#6489)

* Layer: Do not render content until root element ref is available and virtual parent can be set. * Change file.
microsoft · Sep 27, 2018 · 7c8f612 · 7c8f612
1 parent ab1cbca
commit 7c8f612
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 4 deletions.
diff --git a/common/changes/office-ui-fabric-react/jg-6484-layer-fix_2018-09-27-02-05.json b/common/changes/office-ui-fabric-react/jg-6484-layer-fix_2018-09-27-02-05.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Layer: Do not render content until virtual parent is set.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]"
+}
diff --git a/packages/office-ui-fabric-react/src/components/Layer/Layer.base.tsx b/packages/office-ui-fabric-react/src/components/Layer/Layer.base.tsx
@@ -14,10 +14,14 @@ import {
 } from '../../Utilities';
 import { registerLayer, getDefaultTarget, unregisterLayer } from './Layer.notification';
 
+export type ILayerBaseState = {
+  hasMounted: boolean;
+};
+
 const getClassNames = classNamesFunction<ILayerStyleProps, ILayerStyles>();
 
 @customizable('Layer', ['theme', 'hostId'])
-export class LayerBase extends BaseComponent<ILayerProps, {}> {
+export class LayerBase extends BaseComponent<ILayerProps, ILayerBaseState> {
   public static defaultProps: ILayerProps = {
     onLayerDidMount: () => undefined,
     onLayerWillUnmount: () => undefined
@@ -30,6 +34,10 @@ export class LayerBase extends BaseComponent<ILayerProps, {}> {
   constructor(props: ILayerProps) {
     super(props);
 
+    this.state = {
+      hasMounted: false
+    };
+
     this._warnDeprecations({
       onLayerMounted: 'onLayerDidMount'
     });
@@ -50,6 +58,10 @@ export class LayerBase extends BaseComponent<ILayerProps, {}> {
   }
 
   public componentDidMount(): void {
+    // We can safely set state immediately because the ref wrapper will make sure the virtual
+    //    parent has been set before componentDidMount is called.
+    this.setState({ hasMounted: true });
+
     this._setVirtualParent();
 
     const { onLayerDidMount, onLayerMounted } = this.props;
@@ -82,10 +94,12 @@ export class LayerBase extends BaseComponent<ILayerProps, {}> {
   public render(): React.ReactNode {
     const classNames = this._getClassNames();
     const { eventBubblingEnabled } = this.props;
+    const { hasMounted } = this.state;
 
     return (
-      <span className="ms-layer" ref={this._rootElement}>
+      <span className="ms-layer" ref={this._handleRootElementRef}>
         {this._layerElement &&
+          hasMounted &&
           ReactDOM.createPortal(
             eventBubblingEnabled ? (
               <Fabric className={classNames.content}>{this.props.children}</Fabric>
@@ -129,6 +143,20 @@ export class LayerBase extends BaseComponent<ILayerProps, {}> {
     );
   }
 
+  /**
+   * rootElement wrapper for setting virtual parent as soon as root element ref is available.
+   */
+  private _handleRootElementRef = (ref: HTMLDivElement): void => {
+    this._rootElement(ref);
+    if (ref) {
+      // TODO: Calling _setVirtualParent in this ref wrapper SHOULD allow us to remove
+      //    other calls to _setVirtualParent throughout this class. However,
+      //    as this is an immediate fix for a P0 issue the existing _setVirtualParent
+      //    calls are left for now to minimize potential regression.
+      this._setVirtualParent();
+    }
+  };
+
   /**
    * Helper to stop events from bubbling up out of Layer.
    */

diff --git a/...-fabric-react/src/components/__snapshots__/CommandBar.CommandBarButtonAs.Example.tsx.shot b/...-fabric-react/src/components/__snapshots__/CommandBar.CommandBarButtonAs.Example.tsx.shot
@@ -2483,7 +2483,7 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co
                         margin-top: 0;
                         white-space: nowrap;
                       }
-                  id="id__13"
+                  id="id__10"
                 >
                   Download
                 </div>
@@ -2789,7 +2789,7 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co
                         margin-top: 0;
                         white-space: nowrap;
                       }
-                  id="id__19"
+                  id="id__16"
                 >
                   Sort
                 </div>