Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
fix(Popover): touch not opening popover on mobile (#1425) (#1426)
For Popovers/Tooltips with trigger="click" or trigger="legacy", touches
on mobile were triggering touchstart and then click, which caused them
to open briefly and then immediately close. This removes the
touchstart event handling to fix behaviour on mobile.
  • Loading branch information
hsource authored and TheSharpieOne committed Mar 20, 2019
1 parent 9f7dd45 commit ad2a9a0
Show file tree
Hide file tree
Showing 2 changed files with 40 additions and 6 deletions.
8 changes: 2 additions & 6 deletions src/TooltipPopoverWrapper.js
Expand Up @@ -222,9 +222,7 @@ class TooltipPopoverWrapper extends React.Component {
let triggers = this.props.trigger.split(' ');
if (triggers.indexOf('manual') === -1) {
if (triggers.indexOf('click') > -1 || triggers.indexOf('legacy') > -1) {
['click', 'touchstart'].forEach(event =>
document.addEventListener(event, this.handleDocumentClick, true)
);
document.addEventListener('click', this.handleDocumentClick, true);
}

if (this._target) {
Expand Down Expand Up @@ -267,9 +265,7 @@ class TooltipPopoverWrapper extends React.Component {
this._target.removeEventListener('focusout', this.hide, true);
}

['click', 'touchstart'].forEach(event =>
document.removeEventListener(event, this.handleDocumentClick, true)
);
document.removeEventListener('click', this.handleDocumentClick, true)
}

updateTarget() {
Expand Down
38 changes: 38 additions & 0 deletions src/__tests__/TooltipPopoverWrapper.spec.js
Expand Up @@ -229,6 +229,44 @@ describe('Tooltip', () => {
wrapper.detach();
});

it('should open after receiving single touchstart and single click', () => {
const wrapper = mount(
<TooltipPopoverWrapper target="target" isOpen={isOpen} toggle={toggle} trigger="click">
Tooltip Content
</TooltipPopoverWrapper>,
{ attachTo: container }
);

expect(isOpen).toBe(false);
target.dispatchEvent(new Event('touchstart'));
jest.runTimersToTime(20);
target.dispatchEvent(new Event('click'));
jest.runTimersToTime(200);
expect(isOpen).toBe(true);

wrapper.detach();
});

it('should close after receiving single touchstart and single click', () => {
isOpen = true;

const wrapper = mount(
<TooltipPopoverWrapper target="target" isOpen={isOpen} toggle={toggle} trigger="click">
Tooltip Content
</TooltipPopoverWrapper>,
{ attachTo: container }
);

expect(isOpen).toBe(true);
target.dispatchEvent(new Event('touchstart'));
jest.runTimersToTime(20);
target.dispatchEvent(new Event('click'));
jest.runTimersToTime(200);
expect(isOpen).toBe(false);

wrapper.detach();
});

it('should pass down custom modifiers', () => {
const wrapper = mount(
<TooltipPopoverWrapper
Expand Down

0 comments on commit ad2a9a0

Please sign in to comment.