Skip to content
This repository was archived by the owner on May 24, 2024. It is now read-only.

Commit 017fef7

Browse files
mjhenkesmjhenkes
authored
[terra-application-navigation] Prevent error when using focus trap with react intl v5 (#1381)
* Prevent error when using focus trap with react intl v5 * remove heroku prebuild step
1 parent 42f86a5 commit 017fef7

File tree

3 files changed

+125
-105
lines changed

3 files changed

+125
-105
lines changed

‎packages/terra-application-navigation/CHANGELOG.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@
66
* Updated to terra-functional-testing
77
* Remove extraneous application bases from tests.
88

9+
* Fixed
10+
* Prevent error when using focus trap with react-intl v5
11+
912
## 1.46.0 - (February 9, 2021)
1013

1114
* Fixed

‎packages/terra-application-navigation/src/ApplicationNavigation.jsx

Lines changed: 23 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -211,20 +211,29 @@ const ApplicationNavigation = ({
211211
}}
212212
className={cx('drawer-menu-focus-trap-container')}
213213
>
214-
<DrawerMenu
215-
titleConfig={titleConfig}
216-
userConfig={userConfig}
217-
hero={hero}
218-
navigationItems={navigationItems}
219-
activeNavigationItemKey={activeNavigationItemKey}
220-
onSelectNavigationItem={onSelectNavigationItem ? generateMenuClosingCallback(onSelectNavigationItem) : undefined}
221-
onSelectSettings={onSelectSettings ? generateMenuClosingCallback(onSelectSettings) : undefined}
222-
onSelectHelp={onSelectHelp ? generateMenuClosingCallback(onSelectHelp) : undefined}
223-
onSelectLogout={onSelectLogout ? generateMenuClosingCallback(onSelectLogout) : undefined}
224-
utilityItems={utilityItems}
225-
onSelectUtilityItem={onSelectUtilityItem ? generateMenuClosingCallback(onSelectUtilityItem) : undefined}
226-
notifications={notifications}
227-
/>
214+
{/*
215+
The following div has been added to prevent a "Cannot read property 'ownerDocument' of null" error when using react-intl v5.
216+
See link for more info: https://github.com/focus-trap/focus-trap-react/issues/44#issuecomment-543770159
217+
This div could be removed with a newer version of FocusTrap
218+
*/}
219+
<div
220+
className={cx('drawer-menu-focus-trap-container')}
221+
>
222+
<DrawerMenu
223+
titleConfig={titleConfig}
224+
userConfig={userConfig}
225+
hero={hero}
226+
navigationItems={navigationItems}
227+
activeNavigationItemKey={activeNavigationItemKey}
228+
onSelectNavigationItem={onSelectNavigationItem ? generateMenuClosingCallback(onSelectNavigationItem) : undefined}
229+
onSelectSettings={onSelectSettings ? generateMenuClosingCallback(onSelectSettings) : undefined}
230+
onSelectHelp={onSelectHelp ? generateMenuClosingCallback(onSelectHelp) : undefined}
231+
onSelectLogout={onSelectLogout ? generateMenuClosingCallback(onSelectLogout) : undefined}
232+
utilityItems={utilityItems}
233+
onSelectUtilityItem={onSelectUtilityItem ? generateMenuClosingCallback(onSelectUtilityItem) : undefined}
234+
notifications={notifications}
235+
/>
236+
</div>
228237
</FocusTrap>
229238
);
230239
}

‎packages/terra-application-navigation/tests/jest/__snapshots__/ApplicationNavigation.test.jsx.snap

Lines changed: 99 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -64,66 +64,70 @@ exports[`ApplicationNavigation correctly applies the theme context className 1`]
6464
}
6565
paused={false}
6666
>
67-
<InjectIntl(DrawerMenu)
68-
notifications={Object {}}
69-
utilityItems={Array []}
67+
<div
68+
className="drawer-menu-focus-trap-container"
7069
>
71-
<DrawerMenu
72-
intl={
73-
Object {
74-
"defaultFormats": Object {},
75-
"defaultLocale": "en",
76-
"formatDate": [Function],
77-
"formatHTMLMessage": [Function],
78-
"formatMessage": [Function],
79-
"formatNumber": [Function],
80-
"formatPlural": [Function],
81-
"formatRelative": [Function],
82-
"formatTime": [Function],
83-
"formats": Object {},
84-
"formatters": Object {
85-
"getDateTimeFormat": [Function],
86-
"getMessageFormat": [Function],
87-
"getNumberFormat": [Function],
88-
"getPluralFormat": [Function],
89-
"getRelativeFormat": [Function],
90-
},
91-
"locale": "en",
92-
"messages": null,
93-
"now": [Function],
94-
"onError": [Function],
95-
"textComponent": "span",
96-
"timeZone": null,
97-
}
98-
}
99-
navigationItems={Array []}
70+
<InjectIntl(DrawerMenu)
10071
notifications={Object {}}
10172
utilityItems={Array []}
10273
>
103-
<div
104-
className="drawer-container"
74+
<DrawerMenu
75+
intl={
76+
Object {
77+
"defaultFormats": Object {},
78+
"defaultLocale": "en",
79+
"formatDate": [Function],
80+
"formatHTMLMessage": [Function],
81+
"formatMessage": [Function],
82+
"formatNumber": [Function],
83+
"formatPlural": [Function],
84+
"formatRelative": [Function],
85+
"formatTime": [Function],
86+
"formats": Object {},
87+
"formatters": Object {
88+
"getDateTimeFormat": [Function],
89+
"getMessageFormat": [Function],
90+
"getNumberFormat": [Function],
91+
"getPluralFormat": [Function],
92+
"getRelativeFormat": [Function],
93+
},
94+
"locale": "en",
95+
"messages": null,
96+
"now": [Function],
97+
"onError": [Function],
98+
"textComponent": "span",
99+
"timeZone": null,
100+
}
101+
}
102+
navigationItems={Array []}
103+
notifications={Object {}}
104+
utilityItems={Array []}
105105
>
106106
<div
107-
className="drawer-menu"
108-
data-navigation-drawer-menu={true}
109-
role={null}
110-
tabIndex={0}
107+
className="drawer-container"
111108
>
112109
<div
113-
className="vertical-overflow-container"
110+
className="drawer-menu"
111+
data-navigation-drawer-menu={true}
112+
role={null}
113+
tabIndex={0}
114114
>
115115
<div
116-
className="header"
116+
className="vertical-overflow-container"
117117
>
118118
<div
119-
className="header-background-fill"
120-
/>
119+
className="header"
120+
>
121+
<div
122+
className="header-background-fill"
123+
/>
124+
</div>
121125
</div>
122126
</div>
123127
</div>
124-
</div>
125-
</DrawerMenu>
126-
</InjectIntl(DrawerMenu)>
128+
</DrawerMenu>
129+
</InjectIntl(DrawerMenu)>
130+
</div>
127131
</FocusTrap>
128132
</div>
129133
<div
@@ -512,56 +516,60 @@ exports[`ApplicationNavigation should render with prop data at medium breakpoint
512516
}
513517
paused={false}
514518
>
515-
<InjectIntl(DrawerMenu)
516-
activeNavigationItemKey="my-test-key"
517-
hero={
518-
<div>
519-
my test hero
520-
</div>
521-
}
522-
navigationItems={
523-
Array [
524-
Object {
525-
"key": "my-test-key",
526-
"text": "test-text",
527-
},
528-
]
529-
}
530-
notifications={
531-
Object {
532-
"my-test-key-1": 3,
519+
<div
520+
className="drawer-menu-focus-trap-container"
521+
>
522+
<InjectIntl(DrawerMenu)
523+
activeNavigationItemKey="my-test-key"
524+
hero={
525+
<div>
526+
my test hero
527+
</div>
533528
}
534-
}
535-
onSelectHelp={[Function]}
536-
onSelectLogout={[Function]}
537-
onSelectNavigationItem={[Function]}
538-
onSelectSettings={[Function]}
539-
onSelectUtilityItem={[Function]}
540-
titleConfig={
541-
Object {
542-
"title": "test-title",
529+
navigationItems={
530+
Array [
531+
Object {
532+
"key": "my-test-key",
533+
"text": "test-text",
534+
},
535+
]
543536
}
544-
}
545-
userConfig={
546-
Object {
547-
"detail": "user-detail",
548-
"imageSrc": "user-src",
549-
"initials": "user-initials",
550-
"name": "user-name",
537+
notifications={
538+
Object {
539+
"my-test-key-1": 3,
540+
}
551541
}
552-
}
553-
utilityItems={
554-
Array [
542+
onSelectHelp={[Function]}
543+
onSelectLogout={[Function]}
544+
onSelectNavigationItem={[Function]}
545+
onSelectSettings={[Function]}
546+
onSelectUtilityItem={[Function]}
547+
titleConfig={
555548
Object {
556-
"icon": <span>
557-
my icon
558-
</span>,
559-
"key": "my-test-key-2",
560-
"text": "test-text-2",
561-
},
562-
]
563-
}
564-
/>
549+
"title": "test-title",
550+
}
551+
}
552+
userConfig={
553+
Object {
554+
"detail": "user-detail",
555+
"imageSrc": "user-src",
556+
"initials": "user-initials",
557+
"name": "user-name",
558+
}
559+
}
560+
utilityItems={
561+
Array [
562+
Object {
563+
"icon": <span>
564+
my icon
565+
</span>,
566+
"key": "my-test-key-2",
567+
"text": "test-text-2",
568+
},
569+
]
570+
}
571+
/>
572+
</div>
565573
</FocusTrap>
566574
</div>
567575
<div

0 commit comments

Comments
 (0)