[Popover] Broken onEntering event propagation

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Select options position on screen should open close to the input position

Current Behavior

Select options position on screen opens in top left window corner

Steps to Reproduce

Link: https://codesandbox.io/s/6vo1kkz64k (everything related is in src/pages/repro.js file)

1. Add Select component
2. Load options of that Select component dynamically after first render (e.g. via AJAX)
3. Click on that Select component
4. Observe in which position on the page the Select component options open

Context

We are using dynamic options loading in our app for dynamic filtering. Without going into too much detail:

We have 2 filters. One filter is “location” filter (not related to window.location). Second filter is “user” filter. Both filters are implemented with Select components.

The second “user” filter depends on the value of first “location” filter. If the value of first “location” filter changes, then we reload “user” filter options that depend on the selected “location” filter value.

We use that functionality in multiple places in the app.

Your Environment

Tech	Version
Material-UI	Tested on v3.4.0 & v.3.5.0 & v3.5.1
React	Tested on v16.5.2 & v16.6.3
Browser	Tested on Chrome 69 & 70 & MS Edge 42
TypeScript
etc.

This started to happen when we upgraded to @material-ui/core v.3.4.0.

Since then we’ve downgraded to v3.3.2 where this doesn’t happen.

[oliviertassinari]

@DominikSerafin Thank you for taking the time to open this pull request and sharing it! The root of the issue is in the Popover: https://github.com/mui-org/material-ui/blob/7d2070fb388295d38806ecc49717006f34393e74/packages/material-ui/src/Popover/Popover.js#L321-L333

---

We have a createChainedFunction() helper function to handle this use case.

--- a/packages/material-ui/src/Popover/Popover.js
+++ b/packages/material-ui/src/Popover/Popover.js
@@ -8,6 +8,7 @@ import debounce from 'debounce'; // < 1kb payload overhead when lodash/debounce
 import EventListener from 'react-event-listener';
 import ownerDocument from '../utils/ownerDocument';
 import ownerWindow from '../utils/ownerWindow';
+import { createChainedFunction } from '../utils/helpers';
 import withStyles from '../styles/withStyles';
 import Modal from '../Modal';
 import Grow from '../Grow';
@@ -294,7 +295,7 @@ class Popover extends React.Component {
       transformOrigin,
       TransitionComponent,
       transitionDuration: transitionDurationProp,
-      TransitionProps,
+      TransitionProps = {},
       ...other
     } = this.props;

@@ -323,13 +324,13 @@ class Popover extends React.Component {
           in={open}
           onEnter={onEnter}
           onEntered={onEntered}
-          onEntering={this.handleEntering}
           onExit={onExit}
           onExited={onExited}
           onExiting={onExiting}
           role={role}
           timeout={transitionDuration}
           {...TransitionProps}
+          onEntering={createChainedFunction(this.handleEntering, TransitionProps.onEntering)}
         >
           <Paper
             className={classes.paper}

The alternative is to warn so people don’t use this pattern. What do you think? Do you want to submit a pull request to handle this problem? 😃

[IssueHuntBot]

@oliviertassinari has rewarded $72.00 to @ekoeditaa. See it on IssueHunt

• 💰 Total deposit: $80.00
• 🎉 Repository reward(0%): $0.00
• 🔧 Service fee(10%): $8.00