Layer: Focus/blur listeners not triggered for components on Panel

[danschDE]

Please provide a reproduction of the bug in a codepen:

https://codepen.io/danschDE/pen/VEZjNO

Bug Report

• Package version(s): office-ui-fabric-react@6.74.0
• Browser and OS versions: all

Priorities and help requested:

Are you willing to submit a PR to fix? (Yes, if needed)

Requested priority: (Normal)

Describe the issue:

Focus/blur events from the browser seem not to reach components (SearchBox,InputField,etc) added to a layered component (eg. Panel).

Actual behavior:

Once one component loses the focus (onBlur), attached listeners are not triggered (eg. SearchBox animation not played - all browsers). On Firefox (latest) text cursor also disappears even if the component owns the focus.

Expected behavior:

In the codepen:
Eg. the SearchBox should play its animation once the focus moves to the TextField.

[danschDE]

Hello,

On a (very rough) first look at this, the problem seems to originate in the LayerComponent where all events are filtered to stop them from bubbling up beyond the current layer (by stopping propagation).
Nevertheless eg. the SearchBox component expects its listener (to update internal state for “hasFocus”) to be triggered during the focus event’s capturing phase.

I had to refresh my memory on events and as it turns out, events in that phase travel from top to target first before they “officially” bubble up from target to top.
Since the event filter in the LayerComponent stops propagation regardless of the event’s phase, it seems as if calling “stopPropagation” on an event in the capturing phase works as one could expected:
The event is stopped on its way down from the layer to the original target: In this case onFocusCapture in the SearchBox will never be triggered.

I did a quick test locally by stopping propagation only in the event’s bubbling phase and as a result the components seem to “behave” (SearchBox animation is played once focus is lost).
Obviously this is just a quick hack without evaluating if that would cause issues on other ends.
At least the FocusTrapZone seems to be still intact and cycles only through the panel’s components.

Hope this helps.
Thanks,
Daniel

[KevinTCoughlin]

Thanks for the repro and analysis @danschDE! Can confirm this bug, marking as high priority.

Possibly related:

• Layer: Reintroduce Portals with Event Blocking #6211
• Dropdown: not opening when used in a panel which needs to scroll into view the dropdown #6484

[Vitalius1]

@JasonGore could this be related to the PRs mentioned above?

[JasonGore]

Yes, Daniel's analysis appears to be accurate. This regression was introduced with #6211.

[msft-github-bot]

🎉This issue was addressed in #6533, which has now been successfully released as office-ui-fabric-react@v6.76.0.:tada:

Handy Links:

• Release Notes
• Official NPM Release
• Test the release with Developer Demo Site