fix(Popup): do not throw if context & trigger are missing (#4026)

Author: layershifter

docs/src/examples/modules/Popup/Usage/PopupExampleContext.js

@@ -1,23 +1,21 @@
-import React, { createRef } from 'react'
+import React from 'react'
 import { Button, Popup } from 'semantic-ui-react'
 
-class PopupExampleContextControlled extends React.Component {
-  contextRef = createRef()
+function PopupExampleContext() {
+  const contextRef = React.useRef()
 
-  render() {
-    return (
-      <>
-        <Popup
-          trigger={<Button content='Trigger Popup' />}
-          context={this.contextRef}
-          content='Hello'
-          position='top center'
-        />
-        ---------->
-        <strong ref={this.contextRef}>here</strong>
-      </>
-    )
-  }
+  return (
+    <>
+      <Popup
+        trigger={<Button content='Trigger Popup' />}
+        context={contextRef}
+        content='Hello'
+        position='top center'
+      />
+      ---------->
+      <strong ref={contextRef}>here</strong>
+    </>
+  )
 }
 
-export default PopupExampleContextControlled
+export default PopupExampleContext

docs/src/examples/modules/Popup/Usage/PopupExampleContextControlled.js

@@ -1,27 +1,26 @@
 import React from 'react'
 import { Button, Popup } from 'semantic-ui-react'
 
-class PopupExampleContextControlled extends React.Component {
-  state = {}
-  contextRef = React.createRef()
+function PopupExampleContextControlled() {
+  const contextRef = React.useRef()
+  const [open, setOpen] = React.useState(false)
 
-  toggle = () => this.setState((prevState) => ({ open: !prevState.open }))
-
-  render() {
-    return (
-      <>
-        <Button content='Open controlled Popup' onClick={this.toggle} />
-        <Popup
-          context={this.contextRef}
-          content='Hello'
-          position='top center'
-          open={this.state.open}
-        />
-        ---------->
-        <strong ref={this.contextRef}>here</strong>
-      </>
-    )
-  }
+  return (
+    <>
+      <Button
+        content='Open controlled Popup'
+        onClick={() => setOpen((prevOpen) => !prevOpen)}
+      />
+      <Popup
+        context={contextRef}
+        content='Hello'
+        position='top center'
+        open={open}
+      />
+      ---------->
+      <strong ref={contextRef}>here</strong>
+    </>
+  )
 }
 
 export default PopupExampleContextControlled

docs/src/examples/modules/Popup/Usage/PopupExampleContextMenu.js

@@ -0,0 +1,64 @@
+import React from 'react'
+import { Menu, Popup, Segment } from 'semantic-ui-react'
+
+function createContextFromEvent(e) {
+  const left = e.clientX
+  const top = e.clientY
+  const right = left + 1
+  const bottom = top + 1
+
+  return {
+    getBoundingClientRect: () => ({
+      left,
+      top,
+      right,
+      bottom,
+
+      height: 0,
+      width: 0,
+    }),
+  }
+}
+
+function PopupExampleContextMenu() {
+  const contextRef = React.useRef()
+  const [open, setOpen] = React.useState(false)
+
+  return (
+    <>
+      <Segment
+        onContextMenu={(e) => {
+          e.preventDefault()
+
+          contextRef.current = createContextFromEvent(e)
+          setOpen(true)
+        }}
+        secondary
+        style={{ height: 200 }}
+        tabIndex={0}
+      >
+        Press Context Menu button or perform a right click in this area to open
+        a popup
+      </Segment>
+
+      <Popup
+        basic
+        context={contextRef}
+        onClose={() => setOpen(false)}
+        open={open}
+      >
+        <Menu
+          items={[
+            { key: 'copy', content: 'Copy', icon: 'copy' },
+            { key: 'code', content: 'View source code', icon: 'code' },
+          ]}
+          onItemClick={() => setOpen(false)}
+          secondary
+          vertical
+        />
+      </Popup>
+    </>
+  )
+}
+
+export default PopupExampleContextMenu

docs/src/examples/modules/Popup/Usage/index.js

@@ -96,6 +96,11 @@ const PopupUsageExamples = () => (
       description='A popup can open over a DOM node when controlled.'
       examplePath='modules/Popup/Usage/PopupExampleContextControlled'
     />
+    <ComponentExample
+      title='Context Menu'
+      description='A popup can open over a DOM node as used as a context menu.'
+      examplePath='modules/Popup/Usage/PopupExampleContextMenu'
+    />
     <ComponentExample
       title='Hide on scroll'
       description='A popup can be hidden on a scroll event.'

src/modules/Popup/lib/createReferenceProxy.js

@@ -7,7 +7,7 @@ class ReferenceProxy {
   }
 
   getBoundingClientRect() {
-    return _.invoke(this.ref.current, 'getBoundingClientRect', {})
+    return _.invoke(this.ref.current, 'getBoundingClientRect') || {}
   }
 
   get clientWidth() {