fix(Popup): do not hide Popup with "hideOnScroll" when scroll comes from inside the Popup (#4337)

Author: oskarwrobel

src/modules/Popup/Popup.js

@@ -36,6 +36,7 @@ export default class Popup extends Component {
   zIndexWasSynced = false
 
   triggerRef = React.createRef()
+  elementRef = React.createRef()
 
   static getDerivedStateFromProps(props, state) {
     if (state.closed || state.disabled) return {}
@@ -101,6 +102,12 @@ export default class Popup extends Component {
   }
 
   hideOnScroll = (e) => {
+    // Do not hide the popup when scroll comes from inside the popup
+    // https://github.com/Semantic-Org/Semantic-UI-React/issues/4305
+    if (_.isElement(e.target) && this.elementRef.current.contains(e.target)) {
+      return
+    }
+
     debug('hideOnScroll()')
     this.setState({ closed: true })
 
@@ -179,7 +186,7 @@ export default class Popup extends Component {
     }
 
     const innerElement = (
-      <ElementType {...contentRestProps} className={classes} style={styles}>
+      <ElementType {...contentRestProps} className={classes} style={styles} ref={this.elementRef}>
         {childrenUtils.isNil(children) ? (
           <>
             {PopupHeader.create(header, { autoGenerateKey: false })}

test/specs/modules/Popup/Popup-test.js

@@ -162,6 +162,24 @@ describe('Popup', () => {
       onClose.should.have.been.calledOnce()
       onClose.should.have.been.calledWithMatch({}, { content: 'foo', onClose, trigger })
     })
+
+    it('not hide on scroll from inside a popup', () => {
+      const onClose = sandbox.spy()
+      const child = <div data-child />
+
+      wrapperMount(
+        <Popup hideOnScroll onClose={onClose} trigger={trigger}>
+          {child}
+        </Popup>,
+      )
+      wrapper.find('button').simulate('click')
+
+      domEvent.scroll(document.querySelector('[data-child]'))
+      onClose.should.not.have.been.called()
+
+      domEvent.scroll(window)
+      onClose.should.have.been.calledOnce()
+    })
   })
 
   describe('hoverable', () => {