[terra-application-navigation] Prevent error when using focus trap wi…

…th react intl v5 (#1381) * Prevent error when using focus trap with react intl v5 * remove heroku prebuild step
cerner · Mar 8, 2021 · 017fef7 · 017fef7
1 parent 42f86a5
commit 017fef7
Show file tree

Hide file tree

Showing 3 changed files with 125 additions and 105 deletions.
diff --git a/packages/terra-application-navigation/CHANGELOG.md b/packages/terra-application-navigation/CHANGELOG.md
@@ -6,6 +6,9 @@
   * Updated to terra-functional-testing
   * Remove extraneous application bases from tests.
 
+* Fixed
+  * Prevent error when using focus trap with react-intl v5
+
 ## 1.46.0 - (February 9, 2021)
 
 * Fixed

diff --git a/packages/terra-application-navigation/src/ApplicationNavigation.jsx b/packages/terra-application-navigation/src/ApplicationNavigation.jsx
@@ -211,20 +211,29 @@ const ApplicationNavigation = ({
         }}
         className={cx('drawer-menu-focus-trap-container')}
       >
-        <DrawerMenu
-          titleConfig={titleConfig}
-          userConfig={userConfig}
-          hero={hero}
-          navigationItems={navigationItems}
-          activeNavigationItemKey={activeNavigationItemKey}
-          onSelectNavigationItem={onSelectNavigationItem ? generateMenuClosingCallback(onSelectNavigationItem) : undefined}
-          onSelectSettings={onSelectSettings ? generateMenuClosingCallback(onSelectSettings) : undefined}
-          onSelectHelp={onSelectHelp ? generateMenuClosingCallback(onSelectHelp) : undefined}
-          onSelectLogout={onSelectLogout ? generateMenuClosingCallback(onSelectLogout) : undefined}
-          utilityItems={utilityItems}
-          onSelectUtilityItem={onSelectUtilityItem ? generateMenuClosingCallback(onSelectUtilityItem) : undefined}
-          notifications={notifications}
-        />
+        {/*
+          The following div has been added to prevent a "Cannot read property 'ownerDocument' of null" error when using react-intl v5.
+          See link for more info: https://github.com/focus-trap/focus-trap-react/issues/44#issuecomment-543770159
+          This div could be removed with a newer version of FocusTrap
+        */}
+        <div
+          className={cx('drawer-menu-focus-trap-container')}
+        >
+          <DrawerMenu
+            titleConfig={titleConfig}
+            userConfig={userConfig}
+            hero={hero}
+            navigationItems={navigationItems}
+            activeNavigationItemKey={activeNavigationItemKey}
+            onSelectNavigationItem={onSelectNavigationItem ? generateMenuClosingCallback(onSelectNavigationItem) : undefined}
+            onSelectSettings={onSelectSettings ? generateMenuClosingCallback(onSelectSettings) : undefined}
+            onSelectHelp={onSelectHelp ? generateMenuClosingCallback(onSelectHelp) : undefined}
+            onSelectLogout={onSelectLogout ? generateMenuClosingCallback(onSelectLogout) : undefined}
+            utilityItems={utilityItems}
+            onSelectUtilityItem={onSelectUtilityItem ? generateMenuClosingCallback(onSelectUtilityItem) : undefined}
+            notifications={notifications}
+          />
+        </div>
       </FocusTrap>
     );
   }

diff --git a/...terra-application-navigation/tests/jest/__snapshots__/ApplicationNavigation.test.jsx.snap b/...terra-application-navigation/tests/jest/__snapshots__/ApplicationNavigation.test.jsx.snap
@@ -64,66 +64,70 @@ exports[`ApplicationNavigation correctly applies the theme context className 1`]
           }
           paused={false}
         >
-          <InjectIntl(DrawerMenu)
-            notifications={Object {}}
-            utilityItems={Array []}
+          <div
+            className="drawer-menu-focus-trap-container"
           >
-            <DrawerMenu
-              intl={
-                Object {
-                  "defaultFormats": Object {},
-                  "defaultLocale": "en",
-                  "formatDate": [Function],
-                  "formatHTMLMessage": [Function],
-                  "formatMessage": [Function],
-                  "formatNumber": [Function],
-                  "formatPlural": [Function],
-                  "formatRelative": [Function],
-                  "formatTime": [Function],
-                  "formats": Object {},
-                  "formatters": Object {
-                    "getDateTimeFormat": [Function],
-                    "getMessageFormat": [Function],
-                    "getNumberFormat": [Function],
-                    "getPluralFormat": [Function],
-                    "getRelativeFormat": [Function],
-                  },
-                  "locale": "en",
-                  "messages": null,
-                  "now": [Function],
-                  "onError": [Function],
-                  "textComponent": "span",
-                  "timeZone": null,
-                }
-              }
-              navigationItems={Array []}
+            <InjectIntl(DrawerMenu)
               notifications={Object {}}
               utilityItems={Array []}
             >
-              <div
-                className="drawer-container"
+              <DrawerMenu
+                intl={
+                  Object {
+                    "defaultFormats": Object {},
+                    "defaultLocale": "en",
+                    "formatDate": [Function],
+                    "formatHTMLMessage": [Function],
+                    "formatMessage": [Function],
+                    "formatNumber": [Function],
+                    "formatPlural": [Function],
+                    "formatRelative": [Function],
+                    "formatTime": [Function],
+                    "formats": Object {},
+                    "formatters": Object {
+                      "getDateTimeFormat": [Function],
+                      "getMessageFormat": [Function],
+                      "getNumberFormat": [Function],
+                      "getPluralFormat": [Function],
+                      "getRelativeFormat": [Function],
+                    },
+                    "locale": "en",
+                    "messages": null,
+                    "now": [Function],
+                    "onError": [Function],
+                    "textComponent": "span",
+                    "timeZone": null,
+                  }
+                }
+                navigationItems={Array []}
+                notifications={Object {}}
+                utilityItems={Array []}
               >
                 <div
-                  className="drawer-menu"
-                  data-navigation-drawer-menu={true}
-                  role={null}
-                  tabIndex={0}
+                  className="drawer-container"
                 >
                   <div
-                    className="vertical-overflow-container"
+                    className="drawer-menu"
+                    data-navigation-drawer-menu={true}
+                    role={null}
+                    tabIndex={0}
                   >
                     <div
-                      className="header"
+                      className="vertical-overflow-container"
                     >
                       <div
-                        className="header-background-fill"
-                      />
+                        className="header"
+                      >
+                        <div
+                          className="header-background-fill"
+                        />
+                      </div>
                     </div>
                   </div>
                 </div>
-              </div>
-            </DrawerMenu>
-          </InjectIntl(DrawerMenu)>
+              </DrawerMenu>
+            </InjectIntl(DrawerMenu)>
+          </div>
         </FocusTrap>
       </div>
       <div
@@ -512,56 +516,60 @@ exports[`ApplicationNavigation should render with prop data at medium breakpoint
       }
       paused={false}
     >
-      <InjectIntl(DrawerMenu)
-        activeNavigationItemKey="my-test-key"
-        hero={
-          <div>
-            my test hero
-          </div>
-        }
-        navigationItems={
-          Array [
-            Object {
-              "key": "my-test-key",
-              "text": "test-text",
-            },
-          ]
-        }
-        notifications={
-          Object {
-            "my-test-key-1": 3,
+      <div
+        className="drawer-menu-focus-trap-container"
+      >
+        <InjectIntl(DrawerMenu)
+          activeNavigationItemKey="my-test-key"
+          hero={
+            <div>
+              my test hero
+            </div>
           }
-        }
-        onSelectHelp={[Function]}
-        onSelectLogout={[Function]}
-        onSelectNavigationItem={[Function]}
-        onSelectSettings={[Function]}
-        onSelectUtilityItem={[Function]}
-        titleConfig={
-          Object {
-            "title": "test-title",
+          navigationItems={
+            Array [
+              Object {
+                "key": "my-test-key",
+                "text": "test-text",
+              },
+            ]
           }
-        }
-        userConfig={
-          Object {
-            "detail": "user-detail",
-            "imageSrc": "user-src",
-            "initials": "user-initials",
-            "name": "user-name",
+          notifications={
+            Object {
+              "my-test-key-1": 3,
+            }
           }
-        }
-        utilityItems={
-          Array [
+          onSelectHelp={[Function]}
+          onSelectLogout={[Function]}
+          onSelectNavigationItem={[Function]}
+          onSelectSettings={[Function]}
+          onSelectUtilityItem={[Function]}
+          titleConfig={
             Object {
-              "icon": <span>
-                my icon
-              </span>,
-              "key": "my-test-key-2",
-              "text": "test-text-2",
-            },
-          ]
-        }
-      />
+              "title": "test-title",
+            }
+          }
+          userConfig={
+            Object {
+              "detail": "user-detail",
+              "imageSrc": "user-src",
+              "initials": "user-initials",
+              "name": "user-name",
+            }
+          }
+          utilityItems={
+            Array [
+              Object {
+                "icon": <span>
+                  my icon
+                </span>,
+                "key": "my-test-key-2",
+                "text": "test-text-2",
+              },
+            ]
+          }
+        />
+      </div>
     </FocusTrap>
   </div>
   <div