diff --git a/docs/src/examples/modules/Popup/Usage/PopupExampleContext.js b/docs/src/examples/modules/Popup/Usage/PopupExampleContext.js
index 1aba53511a..d721b141a7 100644
--- a/docs/src/examples/modules/Popup/Usage/PopupExampleContext.js
+++ b/docs/src/examples/modules/Popup/Usage/PopupExampleContext.js
@@ -1,20 +1,20 @@
-import React from 'react'
+import React, { createRef } from 'react'
import { Button, Popup } from 'semantic-ui-react'
class PopupExampleContextControlled extends React.Component {
- state = {}
-
- handleRef = node => this.setState({ node })
+ contextRef = createRef()
render() {
- const { node } = this.state
- const trigger =
-
return (
-
+
}
+ context={this.contextRef}
+ content='Hello'
+ position='top center'
+ />
---------->
-
here
+
here
)
}
diff --git a/docs/src/examples/modules/Popup/Usage/PopupExampleContextControlled.js b/docs/src/examples/modules/Popup/Usage/PopupExampleContextControlled.js
index 7ee1320bfd..38432de0cd 100644
--- a/docs/src/examples/modules/Popup/Usage/PopupExampleContextControlled.js
+++ b/docs/src/examples/modules/Popup/Usage/PopupExampleContextControlled.js
@@ -1,22 +1,25 @@
-import React from 'react'
+import React, { createRef, Fragment } from 'react'
import { Button, Popup } from 'semantic-ui-react'
class PopupExampleContextControlled extends React.Component {
state = {}
+ contextRef = createRef()
toggle = () => this.setState({ open: !this.state.open })
- handleRef = node => this.setState({ node })
-
render() {
- const { node, open } = this.state
return (
-
+
-
+
---------->
- here
-
+ here
+
)
}
}
diff --git a/src/modules/Popup/Popup.d.ts b/src/modules/Popup/Popup.d.ts
index 2bf23b1cc5..5649e67a10 100644
--- a/src/modules/Popup/Popup.d.ts
+++ b/src/modules/Popup/Popup.d.ts
@@ -26,7 +26,7 @@ export interface StrictPopupProps extends StrictPortalProps {
content?: SemanticShorthandItem
/** Existing element the pop-up should be bound to. */
- context?: object
+ context?: object | React.RefObject
/** A disabled popup only renders its trigger. */
disabled?: boolean
diff --git a/src/modules/Popup/Popup.js b/src/modules/Popup/Popup.js
index 4f5084454b..cb8c49def8 100644
--- a/src/modules/Popup/Popup.js
+++ b/src/modules/Popup/Popup.js
@@ -14,6 +14,7 @@ import {
SUI,
useKeyOnly,
useKeyOrValueAndKey,
+ isRefObject,
} from '../../lib'
import Portal from '../../addons/Portal'
import PopupContent from './PopupContent'
@@ -53,7 +54,7 @@ export default class Popup extends Component {
content: customPropTypes.itemShorthand,
/** Existing element the pop-up should be bound to. */
- context: PropTypes.object,
+ context: PropTypes.oneOfType([PropTypes.object, customPropTypes.refObject]),
/** A disabled popup only renders its trigger. */
disabled: PropTypes.bool,
@@ -372,7 +373,12 @@ export default class Popup extends Component {
this.setPopupStyle()
}
- getContext = () => this.props.context || this.triggerRef
+ getContext = () => {
+ const { context } = this.props
+ const contextFromProp = isRefObject(context) ? context.current : context
+
+ return contextFromProp || this.triggerRef
+ }
render() {
const {