---
tags: one-library
---

# FocusZone convergence plan
With the recent merge of the repos we now have two versions of most components, `FocusZone` not being an exception to this. In an effort to bring the two versions closer together we have outlined and categorized the deltas between both versions [here](https://hackmd.io/aFpQzPxQQoCgJDLFNspHKg?view).

With that done and after some back and forth on how to proceed we've determined the following plan moving forward:

* <span style="background-color: yellow">Start with non-breaking changes</span>
* <span style="background-color: yellow">Start with merging underlying utilities:</span>
* <span style="background-color: yellow">DOM utilities:</span>
* <span style="background-color: yellow">`getWindow`: Use v7's method as it is functionally the same but has optimization for IE11.</span>
* <span style="background-color: yellow">`getDocument`: Use v7's method as it is functionally the same but has SSR check.</span>
* <span style="background-color: yellow">`getParent` and `elementContains`: Use v7's methods and send `false` as the value for `allowVirtualParents` so that v0's implementation remains the same.</span>
* <span style="background-color: yellow">We'll use the ones in `@uifabric/utilities` for the moment and switch to using the ones from the converged location when that's decided.</span>
* <span style="background-color: yellow">In [#12192](https://github.com/microsoft/fluentui/pull/12192).</span>
* <span style="background-color: yellow">Eventing: `EventGroup` in v7 should be replaced by `EventListener` or native eventing following what v0 is doing.</span>
* <span style="background-color: yellow">In [#12710](https://github.com/microsoft/fluentui/pull/12710).</span>
* <span style="background-color: yellow">Keyboard events: Replace v7 use of `ev.which` and the `KeyCodes` enum with the `keyboardKey` library.</span>
* <span style="background-color: yellow">Need to reduce bundle size of `keyboardKey` library as part of this.</span>
* <span style="background-color: yellow">In [#12339](https://github.com/microsoft/fluentui/pull/12339)</span>
* <span style="background-color: yellow">Continue with merging props existing in both versions but that have different names. We should decide which name to use and deprecate the other name:</span>
* <span style="background-color: yellow">`onBeforeFocus` vs `shouldReceiveFocus`</span>
* <span style="background-color: yellow">In [#12484](https://github.com/microsoft/fluentui/pull/12484)</span>
* <span style="background-color: yellow">`isInnerZoneKeyStroke` vs `shouldEnterInnerZone`</span>
* <span style="background-color: yellow">In [#12484](https://github.com/microsoft/fluentui/pull/12484)</span>
* <span style="background-color: yellow">`doNotAllowFocusEventToPropagate` vs `stopFocusPropagation`</span>
* <span style="background-color: yellow">In [#12484](https://github.com/microsoft/fluentui/pull/12484)</span>
* <span style="background-color: yellow">`onFocusNotification` vs `onFocus`</span>
* <span style="background-color: yellow">In [#12484](https://github.com/microsoft/fluentui/pull/12484)</span>
* <span style="background-color: yellow">`x` and `y` vs `left` and `top`</span>
* <span style="background-color: yellow">In [#12722](https://github.com/microsoft/fluentui/pull/12722)</span>
* <span style="background-color: yellow">`defaultActiveElement` vs `defaultTabbableElement`</span>
* <span style="background-color: yellow">In [#12853](https://github.com/microsoft/fluentui/pull/12853)</span>
* [Should probably be split into two different props later](https://github.com/microsoft/fluentui/pull/12853#pullrequestreview-403910845)
* <span style="background-color: yellow">Finally bring functionality and fixes from each version to their counterparts:</span>
* <span style="background-color: yellow">Add `domOrder` tab handling to v0</span>
* <span style="background-color: yellow">In [#12459](https://github.com/microsoft/fluentui/pull/12459)</span>
* <span style="background-color: yellow">Add `contentEditable` check in `Home` and `End` key handling in v7</span>
* <span style="background-color: yellow">In [#12456](https://github.com/microsoft/fluentui/pull/12456)</span>
* <span style="background-color:yellow">Add `tryInvokeClickForFocusable` implementation in v0</span>
* <span style="background-color: yellow">In [#12478](https://github.com/microsoft/fluentui/pull/12478)</span>
* <span style="background-color: yellow">Add `Page Up` and `Page Down` support in v0</span>
* <span style="background-color: yellow">In [#12448](https://github.com/microsoft/fluentui/pull/12448)</span>
* <span style="background-color: yellow">Add wrap functionality to v0.</span>
* <span style="background-color: yellow">In [#12448](https://github.com/microsoft/fluentui/pull/12448)</span>
* <span style="background-color: yellow">Add `readOnly` check in `shouldInputLoseFocus` to v0</span>
* <span style="background-color: yellow">In [#12457](https://github.com/microsoft/fluentui/pull/12457)</span>
* After doing this we'll need to take a closer look at what to do about contentious changes:
* RTL: This value is pulled from context in both versions and is reliant on each version's implementation so a greater discussion is needed.
* <span style="background-color: yellow">We have to go through the version specific props and methods one by one to see what is staying and what isn't:</span>
* <span style="background-color: yellow">In v0:</span>
* <span style="background-color: yellow"> `restoreFocusFromRoot`</span>
* <span style="background-color: yellow">In [#12615](https://github.com/microsoft/fluentui/pull/12615)</span>
* <span style="background-color: yellow">`focusLast`</span>
* <span style="background-color: yellow">In [#12600](https://github.com/microsoft/fluentui/pull/12600)</span>
* <span style="background-color: yellow">`preventDefaultWhenHandled`</span>
* <span style="background-color: yellow">In [#12636](https://github.com/microsoft/fluentui/pull/12636)</span>
* <span style="background-color: yellow">`shouldFocusOnMount`</span>
* <span style="background-color: yellow">In [#12709](https://github.com/microsoft/fluentui/pull/12709)</span>
* <span style="background-color: yellow">`shouldFocusInnerElementWhenReceivedFocus`</span>
* <span style="background-color: yellow">In [#12853](https://github.com/microsoft/fluentui/pull/12853)</span>
* <span style="background-color: yellow">`shouldResetActiveElementWhenTabFromZone`</span>
* <span style="background-color: yellow">In [#12593](https://github.com/microsoft/fluentui/pull/12593)</span>
* <span style="background-color: yellow">In v7:</span>
* <span style="background-color: yellow">`allowFocusRoot`</span>
* <span style="background-color: yellow">In [#12666](https://github.com/microsoft/fluentui/pull/12666)</span>