diff --git a/packages/terra-popup/CHANGELOG.md b/packages/terra-popup/CHANGELOG.md
index b4549fb5ee0..3139e6a7d0e 100644
--- a/packages/terra-popup/CHANGELOG.md
+++ b/packages/terra-popup/CHANGELOG.md
@@ -2,6 +2,9 @@
## Unreleased
+* Changed
+ * Added event handlers to call `stopPropagation()` on key and focus events on PopupContent in other components.
+
## 6.80.0 - (April 4, 2024)
* Changed
diff --git a/packages/terra-popup/src/_PopupContent.jsx b/packages/terra-popup/src/_PopupContent.jsx
index 29182bdcc3d..4df128812c5 100644
--- a/packages/terra-popup/src/_PopupContent.jsx
+++ b/packages/terra-popup/src/_PopupContent.jsx
@@ -137,6 +137,7 @@ class PopupContent extends React.Component {
constructor(props) {
super(props);
this.handleOnResize = this.handleOnResize.bind(this);
+ this.handlePropagation = this.handlePropagation.bind(this);
}
componentDidMount() {
@@ -168,6 +169,14 @@ class PopupContent extends React.Component {
return null;
}
+ /**
+ * This method stopps key and focus events from bubbling for Popup support in terra-compact-interactive-list.
+ * The key and focus events still work inside the popup as expected.
+ */
+ handlePropagation = (event) => {
+ event.stopPropagation();
+ };
+
handleOnResize(event) {
if (this.props.onResize) {
this.props.onResize(event, this.windowWidth);
@@ -237,6 +246,8 @@ class PopupContent extends React.Component {
onResize={this.handleOnResize}
refCallback={refCallback}
role={popupContentRole || null}
+ onKeyDown={this.handlePropagation}
+ onFocus={this.handlePropagation}
>
{arrowContent}
{/* eslint-disable-next-line react/forbid-dom-props */}
diff --git a/packages/terra-popup/tests/jest/__snapshots__/Popup.test.jsx.snap b/packages/terra-popup/tests/jest/__snapshots__/Popup.test.jsx.snap
index 9a93e93d954..d4b5c4b437e 100644
--- a/packages/terra-popup/tests/jest/__snapshots__/Popup.test.jsx.snap
+++ b/packages/terra-popup/tests/jest/__snapshots__/Popup.test.jsx.snap
@@ -161,6 +161,8 @@ exports[`correctly applies the theme context className 1`] = `
}
excludeScrollbar={false}
onEsc={[Function]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
onResize={[Function]}
outsideClickIgnoreClass="ignore-react-onclickoutside"
preventDefault={false}
@@ -181,6 +183,8 @@ exports[`correctly applies the theme context className 1`] = `
]
}
onEsc={[Function]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
onResize={[Function]}
outsideClickIgnoreClass="ignore-react-onclickoutside"
preventDefault={false}
@@ -192,6 +196,8 @@ exports[`correctly applies the theme context className 1`] = `
diff --git a/packages/terra-popup/tests/jest/__snapshots__/PopupContent.test.jsx.snap b/packages/terra-popup/tests/jest/__snapshots__/PopupContent.test.jsx.snap
index 1923824f4ad..61a2895e8e0 100644
--- a/packages/terra-popup/tests/jest/__snapshots__/PopupContent.test.jsx.snap
+++ b/packages/terra-popup/tests/jest/__snapshots__/PopupContent.test.jsx.snap
@@ -72,6 +72,8 @@ exports[`PopupContent Prop Tests with default props correctly applies the theme
}
excludeScrollbar={false}
onEsc={[MockFunction]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
onResize={[Function]}
outsideClickIgnoreClass="ignore-react-onclickoutside"
preventDefault={false}
@@ -91,6 +93,8 @@ exports[`PopupContent Prop Tests with default props correctly applies the theme
]
}
onEsc={[MockFunction]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
onResize={[Function]}
outsideClickIgnoreClass="ignore-react-onclickoutside"
preventDefault={false}
@@ -101,6 +105,8 @@ exports[`PopupContent Prop Tests with default props correctly applies the theme
@@ -179,6 +185,8 @@ exports[`PopupContent Prop Tests with default props matches the snapshot 1`] = `
}
}
onEsc={[MockFunction]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
onResize={[Function]}
outsideClickIgnoreClass="ignore-react-onclickoutside"
preventDefault={false}
@@ -367,6 +375,8 @@ exports[`PopupContent Prop Tests with header matches the mount snapshot 1`] = `
}
}
onEsc={[MockFunction]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
onResize={[Function]}
outsideClickIgnoreClass="ignore-react-onclickoutside"
preventDefault={false}
@@ -482,6 +492,8 @@ exports[`PopupContent Prop Tests with header matches the mount snapshot 1`] = `
}
}
onEsc={[MockFunction]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
onResize={[Function]}
outsideClickIgnoreClass="ignore-react-onclickoutside"
preventDefault={false}
@@ -588,6 +600,8 @@ exports[`PopupContent Prop Tests with header matches the mount snapshot 1`] = `
"timeZone": null,
}
}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
role="dialog"
tabIndex="0"
>
@@ -755,6 +769,8 @@ exports[`PopupContent Prop Tests with header matches the shallow snapshot 1`] =
}
}
onEsc={[MockFunction]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
onResize={[Function]}
outsideClickIgnoreClass="ignore-react-onclickoutside"
preventDefault={false}