[Tooltip] Fix popper.js re-instantiation (#19304)

packages/material-ui/src/Tooltip/Tooltip.js

@@ -482,6 +482,19 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
  }
  }
 
+ // Avoid the creation of a new Popper.js instance at each render.
+ const popperOptions = React.useMemo(
+ () => ({
+ modifiers: {
+ arrow: {
+ enabled: Boolean(arrowRef),
+ element: arrowRef,
+ },
+ },
+ }),
+ [arrowRef],
+ );
+
  return (
  <React.Fragment>
  {React.cloneElement(children, { ref: handleRef, ...childrenProps })}
@@ -495,14 +508,7 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
  open={childNode ? open : false}
  id={childrenProps['aria-describedby']}
  transition
- popperOptions={{
- modifiers: {
- arrow: {
- enabled: Boolean(arrowRef),
- element: arrowRef,
- },
- },
- }}
+ popperOptions={popperOptions}
  {...interactiveWrapperListeners}
  {...PopperProps}
  >

packages/material-ui/src/Tooltip/Tooltip.test.js

@@ -220,10 +220,10 @@ describe('<Tooltip />', () => {
  it('should use hysteresis with the enterDelay', () => {
  const { container } = render(
  <Tooltip
+ {...defaultProps}
  enterDelay={111}
  leaveDelay={5}
  TransitionProps={{ timeout: 6 }}
- {...defaultProps}
  />,
  );
  const children = container.querySelector('#testChild');
@@ -466,4 +466,20 @@ describe('<Tooltip />', () => {
  );
  });
  });
+
+ it('should use the same popper.js instance between two renders', () => {
+ const popperRef = React.createRef();
+ const { forceUpdate } = render(
+ <Tooltip
+ {...defaultProps}
+ open
+ PopperProps={{
+ popperRef,
+ }}
+ />,
+ );
+ const firstPopperInstance = popperRef.current;
+ forceUpdate();
+ expect(firstPopperInstance).to.equal(popperRef.current);
+ });
 });

test/utils/createClientRender.js

@@ -63,6 +63,15 @@ function clientRender(element, options = {}) {
  return result;
  };
 
+ result.forceUpdate = function forceUpdate() {
+ result.rerender(
+ React.cloneElement(element, {
+ 'data-force-update': String(Math.random()),
+ }),
+ );
+ return result;
+ };
+
  return result;
 }