Layer: Do not block capture events

common/changes/office-ui-fabric-react/jg-6490-layer-fix_2018-10-01-20-57.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Layer: Don't block capture events, allowing onFocus and onBlur events to work as expected.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]"
+}

packages/office-ui-fabric-react/src/components/Layer/Layer.base.tsx

@@ -163,7 +163,7 @@ export class LayerBase extends BaseComponent<ILayerProps, ILayerBaseState> {
   private _filterEvent = (ev: React.SyntheticEvent<HTMLElement>): void => {
     // We should just be able to check ev.bubble here and only stop events that are bubbling up. However, even though mouseenter and
     //    mouseleave do NOT bubble up, they are showing up as bubbling. Therefore we stop events based on event name rather than ev.bubble.
-    if (ev.type !== 'mouseenter' && ev.type !== 'mouseleave') {
+    if (ev.eventPhase === Event.BUBBLING_PHASE && ev.type !== 'mouseenter' && ev.type !== 'mouseleave') {
       ev.stopPropagation();
     }
   };

packages/office-ui-fabric-react/src/components/Layer/Layer.test.tsx

@@ -94,7 +94,7 @@ describe('Layer', () => {
     }
   });
 
-  it('stops events correctly', () => {
+  it('stops bubbling events', () => {
     // Simulate does not propagate events up the hierarchy.
     // Instead, let's check for calls to stopPropagation.
     // https://airbnb.io/enzyme/docs/api/ShallowWrapper/simulate.html
@@ -104,6 +104,7 @@ describe('Layer', () => {
 
     const eventObject = (event: string) => {
       return {
+        eventPhase: Event.BUBBLING_PHASE,
         stopPropagation: () => {
           // Debug code for figuring out which events are firing on test failures:
           // console.log(event);
@@ -129,15 +130,46 @@ describe('Layer', () => {
     expect(stopPropagationCount).toEqual(expectedStopPropagationCount);
   });
 
-  it('bubbles events correctly', () => {
+  it('does not stop non-bubbling events', () => {
     // Simulate does not propagate events up the hierarchy.
     // Instead, let's check for calls to stopPropagation.
     // https://airbnb.io/enzyme/docs/api/ShallowWrapper/simulate.html
     const targetClassName = 'ms-Layer-content';
+    const expectedStopPropagationCount = 0;
     let stopPropagationCount = 0;
 
     const eventObject = (event: string) => {
       return {
+        eventPhase: Event.CAPTURING_PHASE,
+        stopPropagation: () => {
+          // Debug code for figuring out which events are firing on test failures:
+          // console.log(event);
+          stopPropagationCount++;
+        }
+      };
+    };
+
+    const wrapper = mount(<Layer />);
+
+    const targetContent = wrapper.find(`.${targetClassName}`).at(0);
+
+    testEvents.forEach(event => {
+      targetContent.simulate(event, eventObject(event));
+    });
+
+    expect(stopPropagationCount).toEqual(expectedStopPropagationCount);
+  });
+
+  it('allows events to bubble with eventBubblingEnabled prop', () => {
+    // Simulate does not propagate events up the hierarchy.
+    // Instead, let's check for calls to stopPropagation.
+    // https://airbnb.io/enzyme/docs/api/ShallowWrapper/simulate.html
+    const targetClassName = 'ms-Layer-content';
+    let stopPropagationCount = 0;
+
+    const eventObject = (event: string) => {
+      return {
+        eventPhase: Event.BUBBLING_PHASE,
         stopPropagation: () => {
           // Debug code for figuring out which events are firing on test failures:
           // console.log(event);