Skip to content

Commit

Permalink
fix(OverlayTrigger): fix invalid rendering without followCursor (#2600)
Browse files Browse the repository at this point in the history
* fix(OverlayTrigger): fix invalid rendering without followCursor

* fix(OverlayTrigger): add test for followCursor
  • Loading branch information
simonguo committed Jul 22, 2022
1 parent 0d2f0ee commit 08abc8e
Show file tree
Hide file tree
Showing 2 changed files with 66 additions and 2 deletions.
2 changes: 1 addition & 1 deletion src/Overlay/OverlayTrigger.tsx
Expand Up @@ -408,7 +408,7 @@ const OverlayTrigger = React.forwardRef(
triggerEvents.onBlur = createChainedFunction(handleDelayedClose, onBlur);
}

if (trigger !== 'none') {
if (trigger !== 'none' && followCursor) {
triggerEvents.onMouseMove = createChainedFunction(handledMoveOverlay, onMouseMove);
}
}
Expand Down
66 changes: 65 additions & 1 deletion src/Overlay/test/OverlayTriggerSpec.js
Expand Up @@ -4,6 +4,7 @@ import { getDOMNode } from '@test/testUtils';

import OverlayTrigger from '../OverlayTrigger';
import Tooltip from '../../Tooltip';
import { act, render } from '@testing-library/react';

describe('OverlayTrigger', () => {
it('Should create Whisper element', () => {
Expand Down Expand Up @@ -163,6 +164,69 @@ describe('OverlayTrigger', () => {
);

ReactTestUtils.Simulate.mouseMove(whisper);
assert.isTrue(onMouseMove.called);
expect(onMouseMove).to.calledOnce;
});

it('Should not be rendered repeatedly', () => {
const onMouseMove = sinon.spy();
const count = React.createRef(0);

const MyButton = React.forwardRef((props, ref) => {
count.current += 1;
return (
<button {...props} ref={ref}>
{count.current}
</button>
);
});

const whisper = getDOMNode(
<OverlayTrigger onMouseMove={onMouseMove} speaker={<Tooltip />}>
<MyButton />
</OverlayTrigger>
);

expect(count.current).to.equal(1);

act(() => {
ReactTestUtils.Simulate.mouseMove(whisper);
});

expect(count.current).to.equal(1);
});

it('Should overlay follow the cursor', () => {
const onMouseMove = sinon.spy();
const count = React.createRef(0);

const MyButton = React.forwardRef((props, ref) => {
count.current += 1;
return (
<button {...props} ref={ref}>
{count.current}
</button>
);
});

const { getByRole } = render(
<OverlayTrigger onMouseMove={onMouseMove} trigger="hover" followCursor speaker={<Tooltip />}>
<MyButton />
</OverlayTrigger>
);

expect(count.current).to.equal(1);

act(() => {
ReactTestUtils.Simulate.mouseOver(getByRole('button'));
ReactTestUtils.Simulate.mouseMove(getByRole('button'), {
pageY: 10,
pageX: 10,
clientX: 10,
clientY: 10
});
});

expect(count.current).to.equal(2);
expect(getByRole('tooltip').style).to.have.property('left', '10px');
});
});

1 comment on commit 08abc8e

@vercel
Copy link

@vercel vercel bot commented on 08abc8e Jul 22, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.