FocusZone: Changing restoreFocusFromRoot to preventFocusRestoration i…

…n v0 and bringing functionality to v7 (microsoft#12615) * FocusZone: Bringing restoreFocusFromRoot functionality to v7. * Change files * Updating tests. * Change files
levithomason · May 4, 2020 · ce067e6 · ce067e6
1 parent 4039ef7
commit ce067e6
Show file tree

Hide file tree

Showing 10 changed files with 42 additions and 10 deletions.
diff --git a/change/@fluentui-react-focus-2020-04-08-15-14-58-restoreFocusFromRootV7.json b/change/@fluentui-react-focus-2020-04-08-15-14-58-restoreFocusFromRootV7.json
@@ -0,0 +1,9 @@
+{
+  "type": "minor",
+  "comment": "FocusZone: Bringing preventFocusRestoration functionality to v7.",
+  "packageName": "@fluentui/react-focus",
+  "email": "humbertomakotomorimoto@gmail.com",
+  "commit": "611776f861f886408fa0a40ff0c724d7206b405a",
+  "dependentChangeType": "patch",
+  "date": "2020-04-08T22:14:58.456Z"
+}
diff --git a/change/office-ui-fabric-react-2020-04-30-15-29-42-restoreFocusFromRootV7.json b/change/office-ui-fabric-react-2020-04-30-15-29-42-restoreFocusFromRootV7.json
@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Prettier Fix in Callout test.",
+  "packageName": "office-ui-fabric-react",
+  "email": "humbertomakotomorimoto@gmail.com",
+  "dependentChangeType": "patch",
+  "date": "2020-04-30T22:29:42.341Z"
+}
diff --git a/packages/fluentui/accessibility/src/focusZone/types.ts b/packages/fluentui/accessibility/src/focusZone/types.ts
@@ -100,9 +100,11 @@ export interface FocusZoneProperties {
   preventDefaultWhenHandled?: boolean;
 
   /**
-   * If focus is on root element after componentDidUpdate, will attempt to restore the focus to inner element
+   * If true, prevents the FocusZone from attempting to restore the focus to the inner element when the focus is on the
+   * root element after componentDidUpdate.
+   * @defaultvalue false
    */
-  restoreFocusFromRoot?: boolean;
+  preventFocusRestoration?: boolean;
 }
 
 export enum FocusZoneTabbableElements {

diff --git a/packages/fluentui/react-bindings/src/FocusZone/CHANGELOG.md b/packages/fluentui/react-bindings/src/FocusZone/CHANGELOG.md
@@ -4,9 +4,10 @@ This is a list of changes made to this Stardust copy of FocusZone in comparison
 
 ### Converge `FocusZone` with v7's version
 - chore(FocusZone): Using the same DOM utilities in v0 that we use in v7. ([#12192](https://github.com/OfficeDev/office-ui-fabric-react/pull/12192))
-- chore(FocusZone): Adding read only check in shouldInputLoseFocus. ([#12457](https://github.com/microsoft/fluentui/pull/12457))
-- fix(FocusZone): Fixing tab keystroke not handling bidirectionalDomOrder direction. ([#12459](https://github.com/microsoft/fluentui/pull/12459))
+- chore(FocusZone): Adding read only check in `shouldInputLoseFocus`. ([#12457](https://github.com/microsoft/fluentui/pull/12457))
+- fix(FocusZone): Fixing tab keystroke not handling `bidirectionalDomOrder direction`. ([#12459](https://github.com/microsoft/fluentui/pull/12459))
 - chore(FocusZone): Updating some const names used in tests and some comments to bring v0 and v7 versions closer together. ([#12484](https://github.com/microsoft/fluentui/pull/12484))
+- feat(FocusZone): Changing `restoreFocusFromRoot` to `preventFocusRestoration` to make default value be false. [#12615](https://github.com/microsoft/fluentui/pull/12615)
 
 ### Fixes
 - fix(Accessibility): When parking focus needs to be detected, IE11 returns `null` for `activeElement`, causing focus to not be restored. We now check for `null` to ensure the feature works correctly in this environment.

diff --git a/packages/fluentui/react-bindings/src/FocusZone/FocusZone.tsx b/packages/fluentui/react-bindings/src/FocusZone/FocusZone.tsx
@@ -60,7 +60,7 @@ export default class FocusZone extends React.Component<FocusZoneProps> implement
     onFocus: PropTypes.func,
     preventDefaultWhenHandled: PropTypes.bool,
     isRtl: PropTypes.bool,
-    restoreFocusFromRoot: PropTypes.bool,
+    preventFocusRestoration: PropTypes.bool,
   };
 
   static defaultProps: FocusZoneProps = {
@@ -170,7 +170,7 @@ export default class FocusZone extends React.Component<FocusZoneProps> implement
       this._lastIndexPath &&
       (doc.activeElement === doc.body ||
         doc.activeElement === null ||
-        (this.props.restoreFocusFromRoot && doc.activeElement === this._root.current))
+        (!this.props.preventFocusRestoration && doc.activeElement === this._root.current))
     ) {
       // The element has been removed after the render, attempt to restore focus.
       const elementToFocus = getFocusableByIndexPath(this._root.current as HTMLElement, this._lastIndexPath);

diff --git a/packages/fluentui/react-bindings/src/FocusZone/FocusZone.types.ts b/packages/fluentui/react-bindings/src/FocusZone/FocusZone.types.ts
@@ -152,7 +152,9 @@ export interface FocusZoneProps extends FocusZoneProperties, React.HTMLAttribute
   preventDefaultWhenHandled?: boolean;
 
   /**
-   * If focus is on root element after componentDidUpdate, will attempt to restore the focus to inner element
+   * If true, prevents the FocusZone from attempting to restore the focus to the inner element when the focus is on the
+   * root element after componentDidUpdate.
+   * @defaultvalue false
    */
-  restoreFocusFromRoot?: boolean;
+  preventFocusRestoration?: boolean;
 }
diff --git a/packages/fluentui/react-bindings/test/FocusZone/FocusZone-test.tsx b/packages/fluentui/react-bindings/test/FocusZone/FocusZone-test.tsx
@@ -1649,7 +1649,7 @@ describe('FocusZone', () => {
       ReactDOM.render(
         <div>
           <button key="z" id="z" />
-          <FocusZone id="fz" restoreFocusFromRoot={true}>
+          <FocusZone id="fz">
             <button key="a" id="a" data-is-visible="true">
               button a
             </button>

diff --git a/packages/react-focus/etc/react-focus.api.md b/packages/react-focus/etc/react-focus.api.md
@@ -85,6 +85,7 @@ export interface IFocusZoneProps extends React.HTMLAttributes<HTMLElement | Focu
     // @deprecated
     onFocusNotification?: () => void;
     preventDefaultWhenHandled?: boolean;
+    preventFocusRestoration?: boolean;
     // @deprecated
     rootProps?: React.HTMLAttributes<HTMLDivElement>;
     shouldEnterInnerZone?: (ev: React.KeyboardEvent<HTMLElement>) => boolean;

diff --git a/packages/react-focus/src/components/FocusZone/FocusZone.tsx b/packages/react-focus/src/components/FocusZone/FocusZone.tsx
@@ -178,7 +178,9 @@ export class FocusZone extends React.Component<IFocusZoneProps> implements IFocu
     if (
       doc &&
       this._lastIndexPath &&
-      (doc.activeElement === doc.body || doc.activeElement === root || doc.activeElement === null)
+      (doc.activeElement === doc.body ||
+        doc.activeElement === null ||
+        (!this.props.preventFocusRestoration && doc.activeElement === root))
     ) {
       // The element has been removed after the render, attempt to restore focus.
       const elementToFocus = getFocusableByIndexPath(root as HTMLElement, this._lastIndexPath);

diff --git a/packages/react-focus/src/components/FocusZone/FocusZone.types.ts b/packages/react-focus/src/components/FocusZone/FocusZone.types.ts
@@ -215,6 +215,13 @@ export interface IFocusZoneProps extends React.HTMLAttributes<HTMLElement | Focu
    * @defaultvalue true
    */
   preventDefaultWhenHandled?: boolean;
+
+  /**
+   * If true, prevents the FocusZone from attempting to restore the focus to the inner element when the focus is on the
+   * root element after componentDidUpdate.
+   * @defaultvalue false
+   */
+  preventFocusRestoration?: boolean;
 }
 /**
  * {@docCategory FocusZone}