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 eabb67b2d1c241..d75f1ffd77ba25 100644 --- a/packages/material-ui/src/Tooltip/Tooltip.js +++ b/packages/material-ui/src/Tooltip/Tooltip.js @@ -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) { } } - const PopperPropsToPassToPopper = React.useMemo(() => { - const defaultPopperOptions = { - modifiers: { - arrow: { - enabled: Boolean(arrowRef), - element: arrowRef - } - } - } - - return deepmerge({ popperOptions: defaultPopperOptions }, PopperProps || {}) - }, [arrowRef, PopperProps]) + const mergedPopperProps = React.useMemo(() => { + return deepmerge( + { + popperOptions: { + modifiers: { + arrow: { + enabled: Boolean(arrowRef), + element: arrowRef, + }, + }, + }, + }, + PopperProps, + ); + }, [arrowRef, PopperProps]); return ( @@ -511,7 +514,7 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) { id={childrenProps['aria-describedby']} transition {...interactiveWrapperListeners} - {...PopperPropsToPassToPopper} + {...mergedPopperProps} > {({ placement: placementInner, TransitionProps: TransitionPropsInner }) => ( ', () => { describe('prop: PopperProps', () => { it('should pass PopperProps to Popper Component', () => { - const wrapper = mount(); - - assert.strictEqual(wrapper.find(Popper).props().item, 'value'); - }); - - it('should pass popperOptions to Popper Component when PopperProps is undefined', () => { - const wrapper = mount(); - - assert.exists(wrapper.find(Popper).props().popperOptions.modifiers.arrow); - }); - - it('should pass popperOptions to Popper Component when PopperProps is not undefined', () => { - const wrapper = mount(); - - assert.exists(wrapper.find(Popper).props().popperOptions.modifiers.arrow); - assert.strictEqual(wrapper.find(Popper).props().item, 'value'); - }); - - it('should merge popperOptions with arrow modifer', () => { - const wrapper = mount( - , - ); - - assert.exists(wrapper.find(Popper).props().popperOptions.modifiers.arrow); - assert.strictEqual(wrapper.find(Popper).props().popperOptions.item, 'value'); - }); - - it('should merge popperOptions modifiers with arrow modifer', () => { - const wrapper = mount( - , + const { getByTestId } = render( + , ); - assert.exists(wrapper.find(Popper).props().popperOptions.modifiers.arrow); - assert.strictEqual(wrapper.find(Popper).props().popperOptions.modifiers.item, 'value'); + expect(getByTestId('popper')).to.be.ok; }); - it('should override popperOptions arrow modifier', () => { - const wrapper = mount( + it('should merge popperOptions with arrow modifier', () => { + const popperRef = React.createRef(); + render( , ); - - assert.strictEqual(wrapper.find(Popper).props().popperOptions.modifiers.arrow, 'value'); + expect(popperRef.current.modifiers.find(x => x.name === 'arrow').foo).to.equal('bar'); }); });