fix(Popup): opened popup causes infinite rendering loop (#705)

* introduce fix

* add async popup position update example

* update changelog

Author: kuzhelov

CHANGELOG.md

@@ -42,6 +42,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix shorthand prop type @kuzhelov ([#697](https://github.com/stardust-ui/react/pull/697))
 - Export `ShorthandRenderer` type @miroslavstastny ([#698](https://github.com/stardust-ui/react/pull/698))
 - Temporary revert `pxToRem` changes introduced by [#371](https://github.com/stardust-ui/react/pull/371) @kuzhelov ([#700](https://github.com/stardust-ui/react/pull/700))
+- Prevent infinite rendering loop start on `Popup` open @kuzhelov ([#705](https://github.com/stardust-ui/react/pull/705))
 
 ### Documentation
 - Add ability to edit examples' code in JavaScript and TypeScript @layershifter ([#650](https://github.com/stardust-ui/react/pull/650))

docs/src/examples/components/Popup/Usage/PopupExampleAsync.shorthand.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react'
+import { Button, Popup, Segment } from '@stardust-ui/react'
+
+class AsyncDataLoader extends React.Component<any, any> {
+  state = {
+    data: 'loading..',
+  }
+
+  componentDidMount() {
+    setTimeout(() => {
+      this.setState({
+        data: <Segment styles={{ minHeight: '300px' }}>Hello from loaded data!</Segment>,
+      })
+      this.props.onLoaded()
+    }, 1000)
+  }
+
+  render() {
+    return this.state.data
+  }
+}
+
+const PopupExampleAsync = () => (
+  <Popup
+    trigger={<Button icon="expand" content="Click me!" />}
+    renderContent={updatePosition => ({ content: <AsyncDataLoader onLoaded={updatePosition} /> })}
+  />
+)
+
+export default PopupExampleAsync

docs/src/examples/components/Popup/Usage/index.tsx

@@ -5,6 +5,11 @@ import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
 const Usage = () => (
   <ExampleSection title="Usage">
+    <ComponentExample
+      title="Async popup position update"
+      description="A popup can be forced to update its position - this comes in handy in async data loading scenarios."
+      examplePath="components/Popup/Usage/PopupExampleAsync"
+    />
     <ComponentExample
       title="Triggering popup on different actions"
       description="A popup can be triggered on click, hover or focus."

src/components/Popup/Popup.tsx

@@ -92,6 +92,12 @@ export interface PopupProps
    */
   position?: Position
 
+  /**
+   * Function to render popup content.
+   * @param {Function} updatePosition - function to request popup position update.
+   */
+  renderContent?: (updatePosition: Function) => ShorthandValue
+
   /**
    * DOM element that should be used as popup's target - instead of 'trigger' element that is used by default.
    */
@@ -140,6 +146,7 @@ export default class Popup extends AutoControlledComponent<ReactProps<PopupProps
     open: PropTypes.bool,
     onOpenChange: PropTypes.func,
     position: PropTypes.oneOf(POSITIONS),
+    renderContent: PropTypes.func,
     target: PropTypes.any,
     trigger: PropTypes.any,
   }
@@ -411,9 +418,11 @@ export default class Popup extends AutoControlledComponent<ReactProps<PopupProps
     popupPositionClasses: string,
     rtl: boolean,
     accessibility: AccessibilityBehavior,
+    // https://popper.js.org/popper-documentation.html#Popper.scheduleUpdate
     { ref, scheduleUpdate, style: popupPlacementStyles }: PopperChildrenProps,
   ) => {
-    const { content } = this.props
+    const { content: propsContent, renderContent } = this.props
+    const content = renderContent ? renderContent(scheduleUpdate) : propsContent
 
     const popupWrapperAttributes = {
       ...(rtl && { dir: 'rtl' }),
@@ -443,10 +452,6 @@ export default class Popup extends AutoControlledComponent<ReactProps<PopupProps
           overrideProps: this.getContentProps,
         })
 
-    // Schedules a position update after each render.
-    // https://popper.js.org/popper-documentation.html#Popper.scheduleUpdate
-    scheduleUpdate()
-
     return (
       <Ref
         innerRef={domElement => {