diff --git a/docs/pages/api/tooltip.md b/docs/pages/api/tooltip.md index 32a820145ba3f1..94cda4b5019ad1 100644 --- a/docs/pages/api/tooltip.md +++ b/docs/pages/api/tooltip.md @@ -41,7 +41,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | onOpen | func | | Callback fired when the component requests to be open.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. | | open | bool | | If `true`, the tooltip is shown. | | placement | 'bottom-end'
| 'bottom-start'
| 'bottom'
| 'left-end'
| 'left-start'
| 'left'
| 'right-end'
| 'right-start'
| 'right'
| 'top-end'
| 'top-start'
| 'top'
| 'bottom' | Tooltip placement. | -| PopperProps | object | | Props applied to the [`Popper`](/api/popper/) element. | +| PopperProps | object | {} | Props applied to the [`Popper`](/api/popper/) element. | | title * | node | | Tooltip title. Zero-length titles string are never displayed. | | TransitionComponent | elementType | Grow | The component used for the transition. [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. | | TransitionProps | object | | Props applied to the [`Transition`](http://reactcommunity.org/react-transition-group/transition#Transition-props) element. | diff --git a/packages/material-ui/src/Tooltip/Tooltip.js b/packages/material-ui/src/Tooltip/Tooltip.js index 3f7991e684b6c8..d75f1ffd77ba25 100644 --- a/packages/material-ui/src/Tooltip/Tooltip.js +++ b/packages/material-ui/src/Tooltip/Tooltip.js @@ -2,7 +2,7 @@ import * as React from 'react'; import * as ReactDOM from 'react-dom'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -import { elementAcceptingRef } from '@material-ui/utils'; +import { deepmerge, elementAcceptingRef } from '@material-ui/utils'; import { fade } from '../styles/colorManipulator'; import withStyles from '../styles/withStyles'; import capitalize from '../utils/capitalize'; @@ -194,7 +194,7 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) { onOpen, open: openProp, placement = 'bottom', - PopperProps, + PopperProps = {}, title, TransitionComponent = Grow, TransitionProps, @@ -484,18 +484,21 @@ 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, + const mergedPopperProps = React.useMemo(() => { + return deepmerge( + { + popperOptions: { + modifiers: { + arrow: { + enabled: Boolean(arrowRef), + element: arrowRef, + }, + }, }, }, - }), - [arrowRef], - ); + PopperProps, + ); + }, [arrowRef, PopperProps]); return ( @@ -510,9 +513,8 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) { open={childNode ? open : false} id={childrenProps['aria-describedby']} transition - popperOptions={popperOptions} {...interactiveWrapperListeners} - {...PopperProps} + {...mergedPopperProps} > {({ placement: placementInner, TransitionProps: TransitionPropsInner }) => ( ', () => { }); }); + describe('prop: PopperProps', () => { + it('should pass PopperProps to Popper Component', () => { + const { getByTestId } = render( + , + ); + + expect(getByTestId('popper')).to.be.ok; + }); + + it('should merge popperOptions with arrow modifier', () => { + const popperRef = React.createRef(); + render( + , + ); + expect(popperRef.current.modifiers.find(x => x.name === 'arrow').foo).to.equal('bar'); + }); + }); + describe('forward', () => { it('should forward props to the child element', () => { const wrapper = mount(