Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(autoclose): fix popup automatic closing on touch on iOS #3004

Merged

Conversation

maxokorokov
Copy link
Member

@maxokorokov maxokorokov commented Feb 7, 2019

Tested on Android, Windows 10 with touch and iOS.

Autoclose was broken only on iOS, other browsers work fine with mousedown/mouseup while iOS needs to have touchstart/touchend

Fixes #2995

cc @divdavem

@codecov-io
Copy link

Codecov Report

Merging #3004 into master will decrease coverage by 0.13%.
The diff coverage is 60%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master    #3004      +/-   ##
==========================================
- Coverage   92.26%   92.13%   -0.14%     
==========================================
  Files          91       91              
  Lines        2870     2873       +3     
  Branches      463      468       +5     
==========================================
- Hits         2648     2647       -1     
  Misses        163      163              
- Partials       59       63       +4
Flag Coverage Δ
#e2e 60% <60%> (-0.1%) ⬇️
#unit 90.51% <30%> (-0.13%) ⬇️
Impacted Files Coverage Δ
src/util/autoclose.ts 84.61% <60%> (-15.39%) ⬇️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 932d7f6...a186012. Read the comment docs.

const closeableClicks$ = fromEvent<MouseEvent>(this._document, iOS ? 'touchend' : 'mouseup')
.pipe(
withLatestFrom(mouseDowns$), filter(([_, shouldClose]) => shouldClose),
delay(iOS ? 16 : 0), takeUntil(closed$));
Copy link
Member Author

Choose a reason for hiding this comment

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

If anybody has a better solution for this, please share it :)

Problem is when there is a click handler on a triggering element (say, button):

  • to open: clickopen()
  • to close: touchdowntouchupclick (is still generated that leads to)open() (popup reopening)

by delaying the touchup, click and open() are processed while the popup is still opened

@maxokorokov
Copy link
Member Author

As discussed, I'll merge the fix as-is and we'll investigate better ways for handling focus and closing things

cc @fbasso @benouat

@maxokorokov maxokorokov merged commit bc489ec into ng-bootstrap:master Feb 11, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Dropdown does not autoClose on outside click (iOS only)
2 participants